Flex 布局
//也稱為彈性布局，是為了適應(yīng)不同的屏幕尺寸和不同的設(shè)備類型二提出的一種布局方式。
基本概念
上圖是一個橫向的，文本流從左到右的彈性布局圖示。這里有幾個概念
- 彈性容器(Flex container), 指一個聲明為 flex 或者 inline-flex 的元素，是所有 Flex items 的父元素。
- 彈性項目(Flex item), 指 flex 容器內(nèi)的直接孩子元素；彈性容器中的直接文本項默認(rèn)為匿名彈性項目。
- 主軸(main axis)和側(cè)軸(cross axis), 類似于二維中的 X 軸和 Y 軸，主軸由屬性 flex-direction 來定義，與主軸垂直的軸則是側(cè)軸。
定義彈性布局
要使用彈性布局，需要定義一個彈性容器（Flex container），通過聲明 display 屬性為 flex 或者 inline-flex 來將此元素定義為彈性容器。
<figure class="highlight css" style="display: block; margin: 20px 0px; overflow: auto; padding: 15px; font-size: 13px; color: rgb(77, 77, 76); background: rgb(247, 247, 247); line-height: 1.6; font-family: lato, "pingfang sc", "microsoft yahei", sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
|
<pre style="overflow: auto; font-family: consolas, Menlo, "pingfang sc", "microsoft yahei", monospace; font-size: 13px; margin: 0px; padding: 1px 20px 1px 1px; color: rgb(102, 102, 102); background: rgb(247, 247, 247); line-height: 1.6; border: 0px; text-align: right;">1
2
3
</pre>
|
<pre style="overflow: auto; font-family: consolas, Menlo, "pingfang sc", "microsoft yahei", monospace; font-size: 13px; margin: 0px; padding: 1px; color: rgb(77, 77, 76); background: rgb(247, 247, 247); line-height: 1.6; border: 0px;">.flex {
display: flex
}
</pre>
|
</figure>
彈性容器的屬性
-
flex-direction定義排列的方向-
row默認(rèn)值，主軸為水平，從左向右排列 -
row-reverse主軸為水平，從右向左排列 -
column主軸為垂直方向，從上向下排列 -
column-reverse主軸為垂直方向，從下向上排列
-
-
flex-wrap定義是否新行顯示，以及新行的排列方向-
nowrap默認(rèn)值，顯示在同一行，不換行 -
wrap一行顯示不了時使用新行顯示 -
wrap-reverse同wrap，但是從下向上顯示
-
-
flex-flow是flex-direction和flex-wrap的簡寫方式- 使用方法
flex-flow: <‘flex-direction’> || <‘flex-wrap’> - 默認(rèn)值為：
row nowrap
- 使用方法
-
justify-content定義彈性項目在主軸上的對齊方式-
flex-start默認(rèn)值，從起始位置對齊，通常為左對齊 -
flex-end從結(jié)束位置對齊，通常為右對齊 -
center居中對齊 -
space-between兩端對齊，平均間隔 -
space-around每個子元素都有相等的外邊距，相鄰元素外邊距不會疊加
-
-
align-items定義彈性項目在側(cè)軸上的對齊方式-
stretch默認(rèn)值，彈性項目在沒指定高度或者高度為auto的情況下，則高度會占滿空間 -
flex-start側(cè)軸起點(diǎn)開始對齊 -
flex-end從側(cè)軸結(jié)束位置對齊 -
center相對側(cè)軸居中對齊 -
baseline與基線對齊
-
-
align-content定義多行在側(cè)軸的對齊方式，當(dāng)只有一行時，不起作用-
stretch默認(rèn)值，各行會伸展以占滿整個縱軸空間 -
flex-start對齊到縱軸起點(diǎn) -
flex-end對齊到縱軸終點(diǎn) -
center相對縱軸中間對齊 -
space-between各行相對縱軸兩端對齊，各行間隔相等 -
space-around各行都有相等的外邊距，各行的外邊距不會疊加
-
彈性項目的屬性
-
flex-grow數(shù)字，定義彈性項目的放大比例，默認(rèn) 0 -
flex-shrink數(shù)字，定義彈性項目的縮小比例，默認(rèn) 1，值 0 表示不縮小 -
flex-basis數(shù)字，定義彈性項目的默認(rèn)尺寸， -
flex是flex-growflex-shrinkflex-basis的縮寫，默認(rèn)值為0 1 auto -
align-self定義此彈性項目本身的對齊方式，會覆蓋彈性容器align-items定義的對齊方式-
auto從彈性容器繼承 -
stretch彈性項目在沒指定高度或者高度為auto的情況下，則高度會占滿空間 -
flex-start側(cè)軸起點(diǎn)開始對齊 -
flex-end從側(cè)軸結(jié)束位置對齊 -
center相對側(cè)軸居中對齊 -
baseline與基線對齊
-
-
order數(shù)字，定義彈性項目的顯示順序，數(shù)字越小越靠前
CSS3動畫
https://segmentfault.com/a/1190000006699023
阮一峰flex布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
通關(guān)小游戲你就等于學(xué)會flex啦~
http://flexboxfroggy.com/#zh-cn
http://www.flexboxdefense.com/
