說(shuō)到flex布局钳降，在我之前的影響中，只知道這是一種較傳統(tǒng)布局較方便的布局腌巾，這種布局對(duì)我來(lái)說(shuō)是全新的遂填。在flex布局出現(xiàn)之前，我們使用的傳統(tǒng)布局主要有以下幾種：
- normal flow 文檔流澈蝙、正常流
- float + clear 清除浮動(dòng)
- position relative + absolute 相對(duì) + 絕對(duì)定位
- display inline-block 橫向布局
- 負(fù) margin 擴(kuò)大寬度吓坚、產(chǎn)生位移
這些傳統(tǒng)的布局方式雖然可以滿足我們的很多需求，但是也并不方便灯荧，比如實(shí)現(xiàn)垂直居中礁击。而現(xiàn)在我們就要開(kāi)始接觸flex布局這種新的布局方式了。flex也可稱(chēng)為“彈性布局”逗载，flex布局有以下幾個(gè)特點(diǎn)：
- 塊級(jí)布局側(cè)重垂直方向哆窿，行內(nèi)布局側(cè)重水平方向。flex布局與方向無(wú)關(guān)
- flex布局可以實(shí)現(xiàn)空間自動(dòng)分配厉斟，自動(dòng)對(duì)齊
- flex布局適用于簡(jiǎn)單的線性布局挚躯，復(fù)雜的布局則可以使用grid布局
接下來(lái)就將對(duì)flex布局的幾個(gè)重要知識(shí)點(diǎn)進(jìn)行歸納。
flex布局的基本概念
采用flex布局的元素擦秽，稱(chēng)為flex容器（flex container）码荔。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為flex項(xiàng)目（flex item）感挥。
如上圖所示缩搅，該flex容器在縱橫有兩根軸，其中橫向的稱(chēng)為主軸（main axis）触幼，縱向的稱(chēng)為側(cè)軸（cross axis）硼瓣。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end置谦；交叉軸的開(kāi)始位置叫做cross start巨双，結(jié)束位置叫做cross end。子元素默認(rèn)是沿主軸排列的霉祸。子元素在主軸方向的寬度叫做main size筑累，在側(cè)軸方向的高度叫做cross size。
flex container 的屬性
flex container（flex容器）有如下六個(gè)屬性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction 方向
該屬性主要有以下值：
- row：將所有子元素排列在一行丝蹭，不會(huì)換行（默認(rèn)值）
- row-reverse：將所有子元素從右至左排列在一行
- column：將所有子元素從上往下排列
- column-reverse：將所有子元素從下往上排列
flex-wrap 換行
該屬性主要有以下值：
- wrap：換行
- nowrap：不換行（默認(rèn)值）
- wrap-reverse：換行慢宗，但是第一行在下方，即反轉(zhuǎn) wrap 排列。
flex-flow 上面兩個(gè)屬性的縮寫(xiě)
默認(rèn)值為row nowrap镜沽，可以以如下方法設(shè)定該屬性：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content 主軸方向的對(duì)齊方式
該屬性主要有以下值：
- space-between：將各子元素排列在一行敏晤，并將行內(nèi)的空間均分在元素之間
- space-around： 將各子元素排列在一行，并將行內(nèi)的空間分配在元素兩側(cè)
- flex-start：子元素由主軸起點(diǎn)開(kāi)始排列（默認(rèn)值）
- flex-end：子元素由主軸終點(diǎn)開(kāi)始排列
- center：在主軸方向居中
align-items 側(cè)軸方向的對(duì)齊方式
該屬性主要有以下值：
- stretch：將所有子元素伸展至最大高度缅茉，如果子元素未設(shè)置高度或設(shè)為auto嘴脾，將占滿整個(gè)容器的高度。（默認(rèn)值）
- flex-start：子元素由側(cè)軸起點(diǎn)開(kāi)始排列
- flex-end：子元素由側(cè)軸終點(diǎn)開(kāi)始排列
- center：在側(cè)軸方向居中
- baseline: 子元素的第一行文字的基線對(duì)齊蔬墩。效果如下圖所示：
align-content 多行多列的對(duì)齊方式
該屬性主要有以下值：
- space-between：將側(cè)軸方向的空間均分在行距中
- space-around：將側(cè)軸方向的空間分配在每行上下兩側(cè)
- flex-start：以側(cè)軸起點(diǎn)對(duì)齊
- flex-end：以側(cè)軸終點(diǎn)對(duì)齊
- stretch：子元素平均分配側(cè)軸方向的空間译打，伸展排列（默認(rèn)值）
flex item 的屬性
flex item（子元素）有如下六個(gè)屬性：
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
flex-grow 空間足夠時(shí)的擴(kuò)張比例
該屬性默認(rèn)值為0。
如果所有子元素的flex-grow屬性都為1拇颅，則它們將等分剩余空間（如果有的話）奏司。如果一個(gè)子元素的flex-grow屬性為2，其他子元素都為1樟插，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍韵洋。
flex-shink 空間不足時(shí)的收縮比例
該屬性默認(rèn)值為1。
如果所有項(xiàng)目的flex-shrink屬性都為1黄锤，當(dāng)空間不足時(shí)搪缨，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0鸵熟，其他項(xiàng)目都為1勉吻，則空間不足時(shí)，前者不縮小旅赢。
flex-basis 子元素的默認(rèn)寬度
flex-basis屬性定義了在分配多余空間之前齿桃，子元素占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性煮盼，計(jì)算主軸是否有多余空間短纵。它的默認(rèn)值為auto，即子元素的本來(lái)寬度僵控。
flex 上面三條屬性的縮寫(xiě)
默認(rèn)值為0 1 auto香到。可以以如下方式設(shè)定該屬性：
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
order 子元素排序權(quán)重
數(shù)值越小报破，排列越靠前悠就，默認(rèn)為0。
align-self 自身的排序方式
即不使用父元素決定的對(duì)齊方式充易，自身設(shè)定一個(gè)對(duì)齊方式梗脾。可覆蓋align-items屬性盹靴。默認(rèn)值為auto炸茧，表示繼承父元素的align-items屬性瑞妇，如果沒(méi)有父元素，則等同于stretch梭冠。
使用flex布局的幾個(gè)技巧
flex 布局可以簡(jiǎn)便辕狰、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局控漠。下面就簡(jiǎn)要地記錄幾個(gè)flex布局的技巧
- 實(shí)現(xiàn)手機(jī)布局
如果內(nèi)容被修剪蔓倍，需要瀏覽器顯示滾動(dòng)條，以便查看剩余內(nèi)容盐捷，可以使用 over-flow:auto;
實(shí)現(xiàn)手機(jī)上中下布局：
.content{height:100vh;display:flex;flex-direction:column;}
- 實(shí)現(xiàn)電腦左中右布局
.content>aside{width:120px;}
.content>main{height:400px;flex:1}
.content>nav{width:100px;}
- 完美居中
.parent{
display:flex;
justify-content:center;
align-items:center;
}
以上就是我此次關(guān)于flex學(xué)習(xí)的一些記錄偶翅。可以看出毙驯，這次學(xué)習(xí)是圍繞著阮一峰的一篇關(guān)于flex的博客展開(kāi)的，他的博客對(duì)我此次學(xué)習(xí)flex布局以及此次的flex博客編寫(xiě)起到了一定的幫助灾测。除此之外爆价，我在這里推薦兩個(gè)關(guān)于flex學(xué)習(xí)的小游戲，寓教于樂(lè)媳搪，十分有趣铭段。
