css flex佈局

時間 2019-11-24

標籤 css flex 佈局欄目 CSS 简体版

原文原文鏈接

前幾天學了一下grid佈局，可是仍是想了解一下Flex佈局，順便了解一下它們之間的區別。css

Flex是Flexible Box的縮寫，意爲「彈性佈局」。用來爲盒狀模型提供最大的靈活性。html

任何一個容器均可以指定爲Flex佈局。瀏覽器

1,display屬性佈局

值：flex

　　(1)flex:　　設置一個塊狀的flex容器。spa

　　(2)inline-flex:　　設置一個內聯的flex容器。
3d

先設置一個Flex容器：code

html中代碼爲:htm

<div class="box1">

css中代碼爲blog

        .box1{
            display: flex;
            border: 1px solid red;
            width: 500px;
            height: 500px;
        }

這樣，咱們就建立號了一個寬500px,高500px的塊狀Flex容器。

效果圖爲

注意：設爲Flex佈局以後，子元素的float，clear和vertical-align屬性都會失效。

2,Flex容器的屬性

flex容器有六個屬性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

2.1　flex-direction:設置主軸的方向。

　　值

row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿。

html中添加代碼

<div class="box1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

css中寫入

        .box1{
            display: flex;
            border: 1px solid red;
            width: 500px;
            height: 500px;
            flex-direction: row;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            border: 1px solid orange;
        }

咱們即設置了主軸爲row，row值也是默認的值。

效果圖爲

修改flex-direction屬性的值爲column，即設置主軸爲column，

效果圖爲

至於row-reverse和column-reverse就是將它們自行嘗試了。

2.2　flex-wrap屬性

默認狀況下，子元素都排列在一條線（軸線）上，若是軸線上的元素總大小超出了容器的範圍，flex容器並不會自動換行，而會將全部元素進行等比列縮小，直到元素總大小和容器範圍同樣爲止。

這時候就可使用flex-wrap屬性來控制換行。

值：

nowrap（默認）：不換行
wrap：超出容器範圍時會自動換行，第一行在上方。
wrap-reverse：超出容器時會自動換行，第一行在下方。

（1）nowrap

（2）wrap

（3）wrap-reverse

2.3 flex-flow

flex-flow是flex-direction屬性和flex-wrap屬性的簡寫形式。默認值時row，nowrap。

2.4 justify-content屬性

定義了容器在主軸上的對齊方式。

值

flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

修改css中box1中的代碼

        .box1{
            display: flex;
            border: 1px solid red;
            width: 500px;
            height: 500px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

效果圖爲

剩下的值就不作演示了。可自行嘗試。

2.5 align-items屬性

值

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

css中的box1中修改代碼爲

        .box1{
            display: flex;
            border: 1px solid red;
            width: 500px;
            height: 500px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }

效果圖爲

2.6 align-content屬性

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

值

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸

3 子元素的屬性

3.1 order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

爲了方便查看，又設置了喲個flex容器

html中總體代碼爲

<div class="box1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<div class="box2">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>

css中總體代碼爲

        .box1{
            display: flex;
            border: 1px solid red;
            width: 500px;
            height: 500px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            border: 1px solid orange;
        }

        .box2{
            margin-left: 600px;
            margin-top: -500px;
            display: flex;
            border: 1px solid red;
            width: 500px;
            height: 500px;
        }
        .box2 div{
            width: 100px;
            height: 100px;
            border: 1px solid orange;
        }
        .one{order: 2;}
        .two{order: 1;}
        .three{order: 0;}