目錄

flex-box和flex-item

主軸和副軸

?編輯

flex-box的屬性

flex-direction

flex-wrap

flex-flow

justify-content

?編輯?align-items

align-content

flex-item的屬性

flex-basis

flex-grow

flex-shrink

flex

---

flex-box和flex-item

當把一個塊級元素的display設置為flex時，這個塊級元素就成為了flex-box，flex-box也稱為flex-container、盒子、容器等，

flex-box內部的所有子塊級元素都是flex-item，flex-item也稱為項目等

主軸和副軸

默認主軸是水平軸，副軸是垂直軸，副軸也叫交叉軸，

軸可以影響item的排列

原始代碼：

    <div class="flex-box"><h2>test</h2><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div><div class="flex-item">5</div><div class="flex-item">6</div><div class="flex-item">7</div><div class="flex-item">8</div><div class="flex-item">9</div><div class="flex-item">10</div><div class="flex-item">11</div><div class="flex-item">12</div><div class="flex-item">13</div><div class="flex-item">14</div><div class="flex-item">15</div></div><style>.flex-box{background-color: aqua;width: 1000px;height: 200px;display: flex;}.flex-item{background-color: blue;width: 100px;height: 100px;border: 1px solid gray;font-size: 50px;}</style>

初始設置了box的width是1000px，內部每個item的width是100px，但是15個item的width超過box的width了，item的width自動縮小了，為什么會導致這種現象，與flex-grow、flex-shrink、flex-basis的默認值有關，默認值為0 1 auto，元素不會自動擴展，但是會按比例收縮。

flex-box的屬性

flex-direction

flex-direction定義了主軸的方向，內部的item在主軸方向上會按設定的方向排列。

flex-direction:row?

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

flex-direction:initial

默認值，為row

flex-wrap

指定 flex 元素單行顯示還是多行顯示。

flex-wrap:nowarp

不換行。flex 的元素被擺放到到一行，這可能導致 flex 容器溢出，為默認值。

flex-wrap:warp

換行。flex 元素 被打斷到多個行中。

flex-wrap:warp-reverse

換行、倒序。

flex-flow

是 flex-direction 和 flex-wrap 的簡寫。

比如flex-flow:column-reverse wrap

justify-content

定義瀏覽器如何沿著彈性容器的主軸分配內容元素之間和周圍的空間。

這里為了展示出效果，把item數降到六個了。

justify-content:start

從行首開始排列。每行第一個元素與行首對齊，同時所有后續的元素與前一個對齊。

justify-content:end

從行尾開始排列。每行最后一個元素與行尾對齊，同時所有前面的元素與后一個對齊。

justify-content:flex-start

和start效果是一樣的。flex-start只用于flex容器。

justify-content:flex-end

元素緊密地排列在彈性容器的主軸結束側。僅應用于彈性布局的元素。對于不是彈性容器里的元素，此值將被視為end。

和end效果是一樣的。

justify-content:center

伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同。

justify-content:left

左對齊。

justify-content:right

右對齊。

justify-content:space-between

在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。

justify-content:space-around

在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。

justify-content:space-evenly

flex 項都沿著主軸均勻分布在指定的對齊容器中。相鄰 flex 項之間的間距，主軸起始位置到第一個 flex 項的間距，主軸結束位置到最后一個 flex 項的間距，都完全一樣。

justify-content:stretch

雖然彈性盒子支持strech屬性，但將其應用于彈性盒子時，由于拉伸是由flex屬性控制的，所以stretch的行為與start相同。

?align-items

控制子元素在副軸上的對齊。

align-items:flex-start

將item與 flex 容器的主軸起點或副軸起點對齊。

?

align-items:flex-end

將item與 flex 容器的主軸末端或副軸末端對齊。

?

align-items:center

flex 元素的外邊距框在交叉軸上居中對齊。如果元素的交叉軸尺寸大于 flex 容器，它將在兩個方向上等距溢出。

?

align-items:start

將元素與容器的主軸起點或交叉軸起點對齊。和flex-start一樣。

align-items:end

將元素與容器的主軸末端或交叉軸末端對齊。和flex-end一樣。

align-items:stretch

如果（多個）元素的組合大小小于容器的大小，其中自動調整大小的元素將等量增大，以填滿容器，同時這些元素仍然保持其寬高比例的約束。

但單獨設置stretch不會生效。

?

總的來說：

?

align-content

當flex-box的flex-wrap為wrap時生效。

align-content:start

所有行從容器的起始邊緣開始填充。

?

align-content:end

所有行從容器的結束邊緣開始填充。

?

align-content:flex-start

所有行從垂直軸起點開始填充。第一行的垂直軸起點邊和容器的垂直軸起點邊對齊。接下來的每一行緊跟前一行。

align-content:flex-end

所有行從垂直軸末尾開始填充。最后一行的垂直軸終點和容器的垂直軸終點對齊。同時所有后續行與前一個對齊。

align-content:center

所有行朝向容器的中心填充。每行互相緊挨，相對于容器居中對齊。容器的垂直軸起點邊和第一行的距離相等于容器的垂直軸終點邊和最后一行的距離。

?

align-content:normal

這些項按默認位置填充，就像沒有設置對齊內容值一樣。?

總的來說：

?

flex-item的屬性

flex-basis

指定了 flex 元素在主軸方向上的初始大小。

當一個元素同時被設置了flex-basis?(除值為auto外) 和width(或者在flex-direction:column情況下設置了height) ，flex-basis具有更高的優先級。

默認值為auto。

flex-basis:數字

設置px：設置的是對應item的width。

設置百分比：設置的是對應item的width。百分比是相對于父元素的width。

flex-basis:auto：width等于item本身的width。

flex-grow

用來規定彈性元素在有多余空間時的擴展比例。

是一個無單位的數值，默認值為0，這意味著元素不會主動擴展以填滿多余空間。

若設置為大于0的值，元素就會按比例擴展。例如，有兩個元素，一個flex-grow為1，另一個為2，那么后者擴展的空間會是前者的兩倍。

flex-shrink

規定彈性元素在空間不足時的收縮比例。同樣是無單位的數值，默認值為1，表示元素會按照比例收縮。若設置為0，元素就不會收縮。

flex

flex-grow flex-shrink flex-basis的簡寫形式。

flex:initial

元素會根據自身寬高設置尺寸。它會縮短自身以適應 flex 容器，但不會伸長并吸收 flex 容器中的額外自由空間來適應 flex 容器。相當于將屬性設置為flex:0 1 auto

flex:auto

元素會根據自身的寬度與高度來確定尺寸，但是會伸長并吸收 flex 容器中額外的自由空間，也會縮短自身來適應 flex 容器。這相當于將屬性設置為flex:1 1 auto

flex:none

元素會根據自身寬高來設置尺寸。它是完全非彈性的：既不會縮短，也不會伸長來適應 flex 容器。相當于將屬性設置為flex:0 0 auto

可以使用一個，兩個或三個值來指定flex屬性。

單值語法：

一個有效值：

若該值相當于有效flex-grow，該值相當于設置flex-grow，此時簡寫會擴展為flex:flex-grow 1 0.?

若該值相當于有效flex-basis，該值相當于設置flex-basis，此時簡寫會擴展為flex:1 1 flex-basis

兩個有效值：

第一個值必須是flex-grow有效值。

第二個值若為flex-shrink有效值，此時簡寫會擴展為flex:flex-grow flex-shrink 0?

第二個值若為flex-basis有效值，此時簡寫會擴展為flex:flex-grow 1 flex-basis

三個有效值：?

依次對應flex-grow、flex-shrink、flex-basis。

flex-grow值的設置：

負值無效。省略時默認值為 1。 (初始值為?0)

flex-shrink值的設置：

負值無效。省略時默認值為1。 (初始值為?1)

flex-basis值的設置：

若值為0，則必須加上單位，以免被視作伸縮性。省略時默認值為 0。(初始值為 auto)

auto相當于按照元素本身的大小來。

0表示按元素的內容撐開來，設置的width無效。