何為Flex佈局
傳統的佈局解決方案,是基於盒子模型,利用position + margin + float來完成;但這種佈局方案對部分佈局方式很不友好,比如水平垂直居中
Flex佈局是W3C提供的一種新型佈局解決方案,利用彈性盒子佈局,可以做到響應式設計,更好的適配PC端和移動端
Flex基本概念
採用Flex佈局的元素成為Flex容器(flex container),內部元素成為Flex專案(flex item)
Flex容器內部分為主軸(main axis)和交叉軸(cross axis);專案分為主軸(main size)和交叉軸(cross size)
- 塊元素設定flex: display: flex;
- 行內元素設定flex:display:inline-flex;
Flex容器屬性
flex-direction
決定內部專案在主軸上如何排列
flex-direction: row | row-reverse | column | column-reverse
- row:專案從坐向右排列
- row-erverse:專案從右向左排列
- column:專案從上往下排列
- colum-reverse:專案從下往上排列
flex-warp
決定內部專案的換行方式
flex-warp: nowarp | warp | warp-reverse
- nowarp: 不換行
- warp:換行,換行元素在下方
- warp-reverse:換行,換行元素在上方
flex-flow
flex-direction和flex-warp的簡寫形式,預設是row nowarp
flex-flow: < flex-direction > < flex-wrap >;
justify-content
決定專案在主軸上的對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around
- flex-start:左對齊
- flex-end:右對齊
- center:居中對齊
- space-between:兩端對其,專案之間間隔相等
- space-around:每個專案兩側間隔相等,專案之間的間隔比專案與邊框間隔大一倍
aline-items
決定專案在交叉軸上的對齊方式
aline-items: flex-start | flex-end | center | baseline | stretch
- flex-start:交叉軸起點對其,上對其
- flex-end:交叉軸終點對其,下對齊
- center:垂直居中
- baseline:專案的第一行文字基線對齊
- stretch(預設值):如果專案未設定高度或auto,則專案高度填滿容器
aline-content
定義了多軸線的對其方式,如果只存在一條軸線,則不起作用
aline-content: flex-start | flex-end | center | stretch | space-between | space-around
Flex專案屬性
order
定義專案的排列順序,數值越小排列越靠前,預設為0,負值有效
flex-grow
定義專案的放大比例,預設為0
flex-shrink
定義了專案的縮小比例,預設為1;負值無效
flex-basis
定義了在分配多餘空間之前,專案佔據的主軸空間,預設值為專案本來大小
flex
flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto
align-self
允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。