flex基礎佈局詳解

flex-tutorials

系統性的介紹關於flex佈局，也做爲自學的一篇文章

flex基礎理念

使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。一個彈性框容器將延展它的子元素以填充可用空間，而且縮小它的子元素來避免溢出。

flex屬性

一個flex佈局的頁面所具備的元素可分爲2類。
一、彈性容器
二、彈性元素（包含在彈性容器內的元素）

彈性容器

彈性容器擁有橫軸(main)和縱軸(cross)2種方向來決定着總體flex佈局的流向，默認佈局：橫軸從左(main start)到右(main end)，縱軸從上(cross start)到下(cross end)

圖片來自MDN

彈性容器還有相應的CSS屬性

1. flex-direction

2. flex-wrap

3. flex-flow

4. justify-content

5. align-items

6. align-content

flex-direction

指定了內部元素是如何在 flex 容器中佈局的，定義了主軸的方向(正方向或反方向)。

可選值有4種
row：默認，保持原佈局不變，按照橫軸方向佈局，即從左(main start)到右(main end)
row-reverse：按照橫方向佈局，置換橫默認方向，即從右(main end)到左(main start)
column： 按照縱軸默認方向佈局，即從上(cross start)到下(cross end)
column-reverse：按照縱軸方向佈局，置換縱軸默認方向，即從下(cross start)到上(cross end)

demo

注：flex-direction的值即爲整個flex佈局的主軸，flex-direction:row | row-reverse則於橫軸爲主軸，flex-direction:column | column-reverse則於縱軸爲主軸，另外的爲側軸

flex-wrap

指定 flex 元素單行顯示仍是多行顯示 。若是容許換行，這個屬性容許你控制行的堆疊方向

可選值有3種
nowrap： 默認，單行顯示，假如寬度溢出，則自動壓縮相應元素的寬度（壓縮比例與flex-shrink相關），保持單行
wrap： 多行顯示，假如寬度溢出，自動換行
wrap-reverse：多行顯示，置換側軸的方向

demo

flex-flow

flex-direction 和 flex-wrap 的簡寫

.class{
    flex-flow: column-reverse wrap;/*默認屬性*/
}

justify-content

屬性定義彈性元素在主軸方向的排列

可選值有5個

flex-start： 默認值，按照主軸方向進行排列
flex-end： 置換主軸方向進行排列
center： 向中點居中排列
space-between： 在主軸上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最後一個元素與行尾對齊。
space-around：在主軸上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最後一個元素到行尾的距離將會是相鄰元素之間距離的一半。

demo1
demo2

align-items

屬性定義了彈性元素在側軸方向的排列

可選值有5個
flex-start： 默認值，按照側軸方向排列
flex-end： 置換側軸方向進行排列，主軸不變
center： 向中點居中排列
baseline： 全部元素向基線對齊。側軸起點到元素基線距離最大的元素將會於側軸起點對齊以肯定基線(不是很明白，MDN上面的解釋)
stretch：拉伸彈性元素，填充側軸空間

demo

align-content

屬性定義了當彈性元素超過一行時，元素在縱軸上的排列方式

可選值有6個
flex-start： 默認值，緊貼前一行，第一行緊貼邊緣，與主軸排列方式有關
flex-end： 置換側軸方向進行排列，緊貼前一行
center： 向中點居中排列，緊貼前一行
space-between： 全部行在容器中平均分佈。相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最後一行的邊對齊
space-around：全部行在容器中平均分佈，相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最後一行的距離是相鄰兩行間距的一半
stretch：平均分配側軸空間，相鄰行間距相等

demo

彈性元素

包含在彈性容器裏的每一個節點均可以稱爲彈性元素

相應的，彈性元素也有自身的CSS屬性

1. order

2. align-self

3. flex-grow

4. flex-shrink

5. flex-basis

order

彈性元素根據自身order的值來進行排序

demo

align-self

屬性和左右與align-items相同，但因爲是直接做用在彈性元素上面，優先級比align-items高

demo

flex-grow

定義彈性元素側軸拉伸因子

demo

flex-shrink

與flex-grow相反，定義彈性元素的壓縮比例，當彈性元素的總長度超過容器長度時，各自的壓縮率(默認是1)

demo

flex-basis

用來代替width，優先級比width高（若是flex-basis和width有一個值爲auto，那麼另一個非auto優先級更高）

demo

flex

flex-grow、flex-shrink、flex-basis的縮寫

.flex1{
    flex:none;
    /*
    至關於
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex2{
    flex:1;
    /*
    至關於
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex3{
    flex: 1 30px;
    /*
    至關於
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 30px;
    */
}

參考來源

MDN
W3C