flex專案常用屬性為6個
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
例子
div p
p:nth-child(1)
p:nth-child(2)
p:nth-child(4)
style>
1p>
2p>
3p>
4p>
div>
body>
html>
例子
div p
p:nth-child(1)
p:nth-child(2)
p:nth-child(3)
style>
1p>
2p>
3p>
div>
body>
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
例子
div p
p:nth-child(1)
p:nth-child(2)
p:nth-child(3)
style>
1p>
2p>
3p>
div>
body>
ps
負值對該屬性無效。
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
例子
div p
p:nth-child(2)
style>
1p>
2p>
3p>
div>
body>
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
p
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
例子
div p
p:nth-child(2)
style>
1p>
2p>
3p>
div>
body>
Flex 專案屬性 flex 布局示例
flex屬性 flex屬性是flex grow,flex shrink和flex basis的簡寫，預設值為0 1 auto。後兩個屬性可選。該屬性有兩個快捷值 auto 1 1 auto 和 none 0 0 auto 下面來看看使用專案屬性flex的兩個示例 一 css 1 html 1 bod...
flex布局常見父項屬性
1.flex direction 設定主軸的方向 2.justify content 設定主軸上的子元素排列方式 3.flex wrap 設定子元素是否換行 4.align content 設定側軸上的子元素的排列方式 多行 5.align items 設定側軸上的子元素排列方式 單行 6.flex...
flex布局 父項常見屬性
通過給父盒子新增flex屬性，來控制盒子的位置和排列方式。屬性 說明flex direction 設定主軸方向 justify content 設定主軸上的子元素排列方式 flex wrap 設定子元素是否換行 align content 設定側軸上的子元素排列方式 單行 align items 設...