<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • html左右布局模板(html左圖右文布局方法)


    display:flex 意思是彈性布局

    前端開發css中的flex布局的使用

    首先flex的出現是為了解決哪些問題呢?

    一、頁面排列布局

    前端開發css中的flex布局的使用

    像此圖左右兩個div一排顯示

    可以用浮動的布局方式

    html部分

    前端開發css中的flex布局的使用

    css部分

    前端開發css中的flex布局的使用

    這種布局有兩個缺點

    1.需要一個空div來清除浮動,當然也可以選用其他清除浮動的方法,但此處需要清除浮動才能不影響下面的布局。

    2.當.left,.right 的寬度是固定的,瀏覽器寬度變得過窄時,.right會被擠到下面

    用display:flex布局,可以解決這兩個缺點

    剛吃的html部分不變,css部分不變

    前端開發css中的flex布局的使用

    級元素定義display:flex,子元素寬度用flex來定義,flex:1 是均分父子級元素。占的比例相同

    前端開發css中的flex布局的使用

    1:2分時

    前端開發css中的flex布局的使用

    同樣分為3份時

    前端開發css中的flex布局的使用
    前端開發css中的flex布局的使用

    flex是所占的比例,這樣的布局就方便很多。

    二、div上下左右居中

    我之前寫過div上下左右居中的幾種方法

    其中有一個寫了margin:auto auto;這個方法的使用前提就是先把父元素設為display:flex

    前端開發css中的flex布局的使用

    html部分

    前端開發css中的flex布局的使用

    css部分

    前端開發css中的flex布局的使用

    在未知div寬高時,用這種方法比較方便

    這是我在使用flex布局時用到的兩個比較常見又好用的例子

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费