一饿序、Flex 布局是什么勉失？
CSS3引入了一種新的布局模式——Flexbox布局，即伸縮盒模型布局（Flexible Box）模型原探。用來提供一個更加有效的方式制定乱凿、調(diào)整和分布一個容器里的項(xiàng)目布局，即使它們的大小是未知或者動態(tài)的咽弦，這里簡稱Flex徒蟆。
CSS3引入的布局模式Flex布局，主要思想是讓容器有能力讓其子項(xiàng)目能夠改變其寬度型型、高度段审、順序，以最佳的方式填充可用空間闹蒜。Flex容器會使子項(xiàng)目(伸縮項(xiàng)目)擴(kuò)展來填滿可用空間寺枉，或縮小它們以防止溢出容器。
任何一個容器都可以指定為 Flex 布局绷落。
.box{
display: flex;
}
行內(nèi)元素也可以使用 Flex 布局姥闪。
.box{
display: inline-flex;
}
采用 Flex 布局的元素，稱為 Flex 容器（flex container）嘱函，簡稱"容器"甘畅。它的所有子元素自動成為容器成員，稱為 Flex 項(xiàng)目（flex item）往弓，簡稱"項(xiàng)目"疏唾。
設(shè)為 Flex 布局以后，CSS的
columns在伸縮容器上沒有效果函似。子元素（伸縮項(xiàng)目）的float槐脏、clear和vertical-align屬性將失效
Flex布局在定義伸縮項(xiàng)目大小時伸縮容器會預(yù)留一些可用空間，可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置撇寞。例如顿天，可以 確保伸縮容器中的多余空間平均分配多個伸縮項(xiàng)目。如果伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時蔑担，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小牌废，使其不溢出伸縮容器。
二啤握、Flex基本概念和模型中的術(shù)語
和CSS3其他屬性不一樣鸟缕，F(xiàn)lexbox并不是一個屬性，而是一個模塊，包括多個CSS3屬性懂从，涉及東西較多授段，包括整個組屬性，要了解新的術(shù)語和概念才能學(xué)好Flex布局番甩。
在Flexbox模型中與布局計(jì)算偏向使用書寫模式方向的塊布局和行內(nèi)布局不同侵贵，伸縮布局偏向使用伸縮流的方向。為了讓描述伸縮布局變得更容易缘薛，本章定義一系列相對于伸縮流的術(shù)語窍育。如下圖：
主軸、主軸方向：沿著一個伸縮容器的主軸配置伸縮項(xiàng)目掩宜，主軸是主軸方向的延伸蔫骂。伸縮容器額主軸，伸縮項(xiàng)目主要沿著這條軸進(jìn)行布局牺汤。重要，它不一定是水平的浩嫌，這主要取決于
flex-direction屬性檐迟。如果其取值為column，主軸的方向?yàn)榭v向的码耐。主軸起點(diǎn)追迟、主軸終點(diǎn)：伸縮項(xiàng)目的配置從容器的主軸起點(diǎn)邊開始，往主軸終點(diǎn)邊結(jié)束骚腥。也就是說敦间，伸縮項(xiàng)目放置在伸縮容器內(nèi)從主軸起點(diǎn)（
main-start）向主軸終點(diǎn)（main-end）方向。主軸長度束铭、主軸長度屬性：伸縮項(xiàng)目在主軸的方向的寬度或高度就是項(xiàng)目的主軸長度廓块，伸縮項(xiàng)目的主軸長度屬性是
width或height屬性，由哪一個對著主軸的方向決定契沫。側(cè)軸带猴、側(cè)軸方向：與主軸垂直的軸稱做側(cè)軸，側(cè)軸是側(cè)軸方向的延伸懈万。主要取決于主軸的方向拴清。
側(cè)軸起點(diǎn)、側(cè)軸終點(diǎn)：伸縮項(xiàng)目的配置從容器的側(cè)軸起點(diǎn)邊開始会通，往側(cè)軸終點(diǎn)邊結(jié)束口予。也就是說，伸縮項(xiàng)目放置在伸縮容器內(nèi)從側(cè)軸起點(diǎn)（
cross-start）向側(cè)軸終點(diǎn)（cross-end）方向涕侈。側(cè)軸長度沪停、側(cè)軸長度屬性：伸縮項(xiàng)目在側(cè)軸的方向的寬度或高度就是項(xiàng)目的側(cè)軸長度，伸縮項(xiàng)目的側(cè)軸長度屬性是
width或height屬性驾凶，由哪一個對著側(cè)軸的方向決定牙甫。
通過設(shè)置display屬性顯式地給一個元素設(shè)置為flex或者inline-flex掷酗，這個容器就是一個伸縮容器。其中設(shè)置為flex的容器被渲染成為一個塊級元素窟哺，而設(shè)置為inline-flex的容器則渲染為一個行內(nèi)元素泻轰。若元素的display的指定值是inline-flex且元素是一個浮動或絕對定位元素，則display的計(jì)算值是flex且轨。
一個伸縮容器的內(nèi)容具有零個以上的伸縮項(xiàng)目——伸縮容器的每個子元素（除了需要盒修復(fù)的元素之外）都會成為一個伸縮項(xiàng)目浮声。且瀏覽器會將任何直接在伸縮容器里的連續(xù)文字塊包起來成為匿名伸縮項(xiàng)目。
總結(jié)：容器默認(rèn)存在兩根軸：水平的主軸（
main axis）和垂直的交叉軸（cross axis）旋奢。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start泳挥，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start至朗，結(jié)束位置叫做cross end屉符。
項(xiàng)目默認(rèn)沿主軸排列。單個項(xiàng)目占據(jù)的主軸空間叫做main size锹引，占據(jù)的交叉軸空間叫做cross size矗钟。
三、Flexbox模型規(guī)范狀態(tài)
Flexbox布局的語法規(guī)范版本眾多嫌变，瀏覽器支持不一致吨艇。Flex布局語法規(guī)范主要分成三種：
- 舊版本（Old）欲账，2009年版本画切。
- 混合版本（Hybird），2011年版本棚潦。
- 最新版本（Modern）倘待，使用
display:flex或者display:inline-flex疮跑。
Flex布局舊版本和混合版本本章不做介紹，只對符合W3C規(guī)范的最新版本Flex屬性做記錄延柠。如果有興趣的同學(xué)可以參考大漠老師圖解CSS3這本書第8章CSS3伸縮布局盒模型祸挪。
四、伸縮容器的屬性
以下6個屬性設(shè)置在容器上
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
4.1 flex-direction屬性介紹
伸縮流方向贞间。 flex-direction屬性是指伸縮容器的主軸方向贿条，其決定了伸縮項(xiàng)目放置在伸縮容器的方向。其默認(rèn)值為row增热。如果flex-direction設(shè)置為row整以，F(xiàn)lex項(xiàng)目從左到右排列。如果flex-direction設(shè)置為column峻仇，F(xiàn)lex項(xiàng)目從上到下排列公黑。
flex-direction屬性它有4個值。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
-
row：排版方式從左到右排列。 -
row-reverse：與row排列方向相反凡蚜。從右向左排列人断。 -
column：類似于row，不過是從上到下排列朝蜘。 -
column-reverse：類似于row-reverse恶迈，不過是從下到上排列。
4.2 flex-wrap屬性介紹
伸縮流換行谱醇。伸縮項(xiàng)目在伸縮容器中有時候也會溢出伸縮容器暇仲。與傳統(tǒng)的CSS盒模型一樣，CSS允許使用overflow:hidden屬性來處理溢出內(nèi)容的顯示方式副渴。在伸縮容器中有一個伸縮換行屬性奈附，主要用來設(shè)置伸縮容器的伸縮項(xiàng)目是單行顯示還是多行顯示，以及決定側(cè)軸的方向煮剧。使用此屬性來啟用溢出的伸縮容器的伸縮項(xiàng)目自動換行到下一行以及控制流動方向斥滤。在伸縮容器屬性中，主要通過flex-wrap屬性來設(shè)置伸縮項(xiàng)目是否換行轿秧，默認(rèn)值為nowrap中跌。
flex-direction屬性它有3個值。
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
-
nowrap：伸縮容器單行顯示菇篡。 -
wrap：換行，第一行在上方一喘。 -
wrap-reverse：換行驱还，第一行在下方。
4.3 flex-flow屬性介紹
伸縮方向與換行凸克。 flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式议蟆，默認(rèn)值為row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式萎战，默認(rèn)值為row nowrap咐容。
4.4 justify-content屬性
主軸對齊。justify-content屬性定義了伸縮項(xiàng)目在主軸上的對齊方式蚂维。指定如何在伸縮項(xiàng)目之前分布伸縮容器額外空間戳粒。當(dāng)一行上的所伸縮項(xiàng)目不能伸縮或可伸縮但已經(jīng)達(dá)到最大長度時，這一屬性才會對伸縮容器額外空間進(jìn)行分配虫啥。當(dāng)伸縮項(xiàng)目溢出某一行時蔚约，這一屬性也會在項(xiàng)目的對齊上施加一些控制。
justify-content屬性它有5個值涂籽。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
-
flex-start：伸縮項(xiàng)目向一行的起始位置靠齊苹祟。 -
flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊。 -
center：伸縮項(xiàng)目向一行的中間位置靠齊。 -
space-between：伸縮項(xiàng)目會平均地分布在行里树枫。第一個伸縮項(xiàng)目一行中的最開始位置直焙，最后一個項(xiàng)目在一行中最終點(diǎn)位置。 -
space-around：伸縮項(xiàng)目會平均地分布在行里砂轻，兩端保留一半的空間奔誓。（每個項(xiàng)目兩側(cè)的間隔相等。所以舔清，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍丝里。）
4.5 align-items屬性
側(cè)軸對齊。 align-items屬性定義項(xiàng)目在伸縮容器的當(dāng)前行的側(cè)軸（垂直于主軸）上的對齊方式体谒”郏可以把它想象成側(cè)軸的justify-content。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
-
flex-start：伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距緊靠住該行在側(cè)軸起始邊抒痒。（側(cè)軸的起點(diǎn)對齊幌绍。） -
flex-end：伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距緊靠住該行在側(cè)軸終點(diǎn)邊。（側(cè)軸的終點(diǎn)對齊故响。） -
center：伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置傀广。（側(cè)軸的中點(diǎn)對齊。） -
baseline：伸縮項(xiàng)目根據(jù)伸縮項(xiàng)目的基線對齊彩届。（項(xiàng)目的第一行文字的基線對齊伪冰。） -
stretch：默認(rèn)值，伸縮項(xiàng)目拉伸填充整個容器樟蠕。（如果項(xiàng)目未設(shè)置高度或設(shè)為auto贮聂，將占滿整個容器的高度。）
4.6 align-content屬性
堆棧伸縮行寨辩。用來定義伸縮容器中伸縮項(xiàng)目行在側(cè)軸的對齊方式吓懈，類似于側(cè)軸對齊，只不過這是用來控制伸縮項(xiàng)目行在布局軸的堆放方式靡狞。align-content屬性會更改flex-wrap的行為耻警。它和align-items相似，但不是對齊伸縮項(xiàng)目甸怕，它對齊的是伸縮行甘穿。簡單來說，align-content屬性主要用來調(diào)準(zhǔn)伸縮行在伸縮容器里的對齊方式蕾各。它接受的值也很類似扒磁。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
-
flex-start：各行向伸縮容器的起點(diǎn)位置堆疊。 -
flex-end：各行向伸縮容器的結(jié)束位置堆疊式曲。 -
center：各行向伸縮容器的中間位置堆疊妨托。 -
space-between：各行在伸縮容器中平均分布缸榛。 -
space-around：各行在伸縮容器中平均分布，在兩邊各有一半的空間兰伤。 -
stretch：align-content的默認(rèn)值内颗，各行將會伸展以占用額外的空間。
這個屬性只有伸縮項(xiàng)目有多行時才生效敦腔，這種情況只有display的flex-wrap為wrap時均澳，并且沒有足夠的空間把伸縮項(xiàng)目行放在同一行中。也就是這個屬性將對每一行起作用而不是每個伸縮項(xiàng)目符衔。
五找前、伸縮項(xiàng)目的屬性
以下6個屬性設(shè)置在伸縮項(xiàng)目上
orderflex-growflex-shrinkflex-basisflexalign-self
5.1 flex-grow屬性
.box-item {
flex-grow: <number> (默認(rèn)值為0)
}
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0判族，即如果存在剩余空間躺盛，也不放大。如果所有伸縮項(xiàng)目的flex-grow設(shè)置為1形帮，每個伸縮項(xiàng)目將設(shè)置為一個大小相等的額外空間槽惫。如果給其中一個伸縮項(xiàng)目設(shè)置flex-grow值為2，這個伸縮項(xiàng)目所占的額外空間是其他伸縮項(xiàng)目所占額外空間的2倍辩撑。
5.2 flex-shrink屬性
.box-item {
flex-shrink: <number> (默認(rèn)值為1)
}
flex-shrink屬性使用于伸縮項(xiàng)目界斜，此屬性根據(jù)需要來定義伸縮項(xiàng)目收縮的能力。如果所有項(xiàng)目的flex-shrink屬性都為1合冀，當(dāng)空間不足時各薇，都將等比例縮小。如果一個項(xiàng)目的flex-shrink屬性為0君躺，其他項(xiàng)目都為1得糜，則空間不足時，前者不縮小晰洒。
5.3 flex-basis屬性
.box-item {
flex-basis: <length> | auto; (默認(rèn)值為auto)
}
flex-basis屬性使用于伸縮項(xiàng)目。這個屬性用來設(shè)置伸縮項(xiàng)目的伸縮基準(zhǔn)值啥箭，伸縮容器的額外空間按比列進(jìn)行伸縮谍珊。在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）急侥。瀏覽器根據(jù)這個屬性砌滞，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto坏怪，即項(xiàng)目的本來大小贝润。
它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間铝宵。
5.4 flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫打掘，默認(rèn)值為0 1 auto华畏。后兩個屬性可選。
.box-item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
5.5 align-self屬性
.box-item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
align-self屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式尊蚁，可覆蓋align-items屬性亡笑。默認(rèn)值為auto，表示繼承父元素的align-items屬性横朋，如果沒有父元素仑乌，則等同于stretch。
5.6 order屬性
.box-item {
order: <integer>;
}
order屬性定義項(xiàng)目的排列順序。數(shù)值越小决帖，排列越靠前厕九，默認(rèn)為0。
六古瓤、使用Flex布局實(shí)現(xiàn)圣杯布局
- html
<body>
<header>我是頁眉</header>
<section>
<article>我是主內(nèi)容</article>
<nav>我是側(cè)邊欄</nav>
<aside>我是右邊欄</aside>
</section>
<footer>我是頁腳</footer>
</body>
- CSS
* {
padding: 0;
margin: 0;
}
html,body{
width:100%;
height:100%;
overflow: hidden;
}
body{
display: flex;
flex-flow: column wrap;
}
header {
background: red;
/* 頭止剖、腳尺寸固定，不放大落君、不縮小 */
flex:0 0 50px;
}
section {
display: flex;
flex-flow: row wrap;
flex: 1;
background: green;
}
article {
flex: 1;
order: 2;
background: blue;
}
aside{
order: 3;
align-items: stretch;
background:yellow;
}
footer {
/* 頭穿香、腳尺寸固定，不放大绎速、不縮小 */
flex:0 0 50px;
background: darkgoldenrod;
}
七皮获、參考鏈接
- http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- http://static.vgee.cn/static/index.html
- http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
- https://segmentfault.com/a/1190000011791428
- https://book.douban.com/subject/25920727/
- https://www.w3ctrain.com/2015/11/12/visual-guide-to-css3-flexbox-flexbox-playground/
- https://juejin.im/post/5c4ef49b518825273e7339f9
- http://www.reibang.com/p/17b1b445ecd4
- https://segmentfault.com/a/1190000005077709
- https://zhuanlan.zhihu.com/p/24372279
- https://veedrin.com/post/5c740e0d1a74043e31d8aede
