flex快速學習

冰影浴火發表於2018-04-04
Flex

模型概覽

flex是一種頁面佈局方式，被叫做伸縮模型，它可以輕易的實現等分、垂直居中、水平居中、自動伸縮等，用盒模型做起來很麻煩的佈局。

採用flex佈局實現方法：

// html
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    ...
</div>

// css
.parent {
    display: flex; // 塊元素
    display: inline-flex; // 內聯元素
}
複製程式碼

採用flex佈局的元素被稱為flex容器，上面的div元素就是flex容器，容器中的子元素自動成為容器成員，被稱為flex專案。

flex容器預設有兩根軸，水平方向的主軸，垂直方向的交叉軸。

容器的屬性

flex-direction      // 主軸方向
flxe-wrap           // 在軸上排列的方式
flex-flow           // flex-direction和flex-wrap的簡寫
justify-content     // 主軸上如何對齊
align-items         // 交叉軸上如何對齊
align-content       // 多根主軸上如何對齊
複製程式碼

flex-direction

定義主軸方向

flex-direction: row | row-reverse | column | column-reverse 可能的四個值
複製程式碼

row(預設) 主軸水平，正方向為右

CpMec4.png
row-reverse 主軸水平，正方向為左
CpMV9U.png
column 主軸垂直，正方向為下
CpMZ3F.png
column-reverse 主軸垂直，正方向為上
CpMAhT.png

flex-wrap

定義主軸上的專案是否還行

flex-wrap: nowrap | wrap | wrap-reverse
複製程式碼

nowrap(預設) 不換行，如果子專案跨度大於父容器，子專案會等比縮小以被容納，除非子專案裡有flex: none，這樣子專案會溢位父容器。

CpMec4.png
wrap 換行，第一行在上
CpMD4f.png
wrap-reverse 換行，第一行在下
CpMsC8.png

flex-flow

flex-direction和flex-wrap的簡寫

flex-flow: <flex-direction> || <flex-wrap>;
複製程式碼

預設 row nowrow

justify-content

定義主軸上的專案的分佈方式

justify-content: flex-start | center | flex-end | space-between | space-around
複製程式碼

flex-start(預設) 與主軸起點對齊

CplfhV.png
flex-end 主軸上居中
CplRkq.png
flex-end 與主軸終點對齊
Cpl4pT.png
space-between 主軸兩端對齊，專案間隔相等
Cplc0s.png
space-around 主軸兩端對齊，專案間間隔相等並且是專案與邊框間隔的兩倍
Cplg7n.png

align-items

定義專案在交叉軸上的分佈

align-items: flex-start | center | flex-end | baseline | stretch
複製程式碼

flex-start(預設) 與交叉軸起點對齊

Cp1728.png
center 交叉軸上居中
Cp1T8f.png
flex-end 與交叉軸終點對齊
Cp155t.png
baseline 文字基線對齊
Cp1oPP.png
stretch 拉伸，前提是子專案沒有設定高度或高度為auto，否則跟預設一樣
Cp14UI.png

align-content

定義多根主軸線的對齊方式，如果只有一根主軸該屬性不起作用。

align-content: flex-start | center | flex-end | space-between | space-around | stretch
複製程式碼

flex-start 與交叉軸頂端對齊

CpGkNR.png
center 交叉軸上居中
CpGFE9.png
flex-end 與交叉軸底端對齊
CpGegK.png
space-between 與交叉軸兩端對齊，各軸線間間隔相等
CpGV9x.png
space-around 與交叉軸兩端對齊，各軸線間間隔相等且間隔是軸線與邊框間距的兩倍
CpGA41.png
stretch(預設) 把個軸上上專案拉伸至填滿容器，前提是子專案高位auto或沒設定，否則無效
CpGZ36.png

專案的屬性

前面說的屬性都是設定在容器上的，下面就說一說專案上的屬性

order           // 設定專案的排列順序
flex-grow       // 專案的放大   
flex-shrink     // 專案的縮小
flex-basis      // 專案的基礎大小
flex            // flex-basis,flex-grow,flex-shrink的簡寫
align-self      // 設定單個專案在交叉軸上的分佈
複製程式碼
// html
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    ...
</div>

// css
.parent {
    display: flex;
}
.child: {
    order: ...;
    flex: ...;
    align-self: ...;
}
複製程式碼

order

定義專案的排列順序，數值越小，排列越靠前，預設為0。

order: <integer>
複製程式碼

如果order屬性相同，則按照專案的先後順序排列，若專案沒有order,則去預設值0

// html
<div class="parent">
    <div class=child1></div>
    <div class=child2></div>
    <div class=child3></div>
    <div class=child4></div>
</div>

// css
...
.parent {
    display: flex;
}
.child1 {
    order: 4;
    background-color: red;
}
.child2 {
    background-color: yellow;
}
.child3 {
    order: 0;
    background-color: blue;
}
.child4 {
    order: -1;
    background-color: green;
}
複製程式碼

flex快速學習

flex-grow

定義專案的放大比例，當容器空間大於專案總大小時，專案就會按照比例分割多餘容器空間使自己放大，預設為0，就是即使有多餘空間也不會放大。負值無效。

flex-grow: <number>
複製程式碼

沒有flex-grow

flex快速學習
兩專案flex-grow: 1
flex快速學習
第一個專案flex-grow: 1第二個專案flex-grow: 2
flex快速學習

flex-shrink

定義專案的縮小比例，當容器空間小於專案總大小時，專案就會根據按比例縮小自身以便容器可以容納專案。預設為1，就是預設會在空間不足時縮小專案。負值無效。

flex-shrink: <number>
複製程式碼

flex-shrink: 0專案超出部分會溢位

flex快速學習
flex-shrink: 1(預設)，專案等比縮小
flex快速學習
第二個專案flex-shrink: 2，其它flex-shrink: 1,第二個專案縮小量是其它專案的2倍
flex快速學習

flex-basis

定義專案在縮放之前的大小，預設值auto,即本來的大小。

flex-basis: <length> | auto
複製程式碼

可以設定為根width和height屬性一樣的值。

flex

flex-grow,flex-shrink,flex-basis的簡寫形式。預設值0 1 auto。

該屬性有兩個快捷值，flex: auto即flex: 1 1 auto,flex: none即flex: 0 0 auto

align-self

align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;
複製程式碼

除了auto,其餘值都跟align-items表現形式一樣。

align-self: align-end專案與交叉軸末尾對齊

flex快速學習

相關文章