阮一峰Flex布局文檔貼在這了，講的已經(jīng)非常詳細(xì)了，本文主要是總結(jié)下，便于自己今后快速回顧适刀。
Flex布局是什么
Flex 是 Flexible Box 的縮寫秤朗，意為"彈性盒子"煤蹭，用來(lái)為盒狀模型提供最大的靈活性。Flex布局即彈性布局取视。
任何容器都可以指定為flex布局.box{display:flex;}
行內(nèi)元素使用flex布局：.box{display: inline-flex;}
注意：使用Flex布局之后硝皂，里面的float、clear作谭、vertical-align屬性將失效稽物。
基本概念
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start折欠，結(jié)束位置叫做main end贝或；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end锐秦。
容器的屬性
- flex-direction決定主軸的方向
- flex-wrap 設(shè)置項(xiàng)目是否在一條線上
- flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式咪奖，默認(rèn)值為row nowrap
- justify-content 屬性定義項(xiàng)目在主軸上的對(duì)齊方式
- align-items 屬性定義項(xiàng)目在縱軸上的對(duì)齊方式
- align-content 屬性定義了多根軸線的對(duì)齊方式
flex-direction屬性決定主軸的方向（主軸為水平方向還是為垂直方向）/設(shè)置項(xiàng)目的排列方向，默認(rèn)為row
- column-reverse：主軸為垂直方向酱床，起點(diǎn)在下沿羊赵。
- column：主軸為垂直方向，起點(diǎn)在上沿扇谣。
- row（默認(rèn)值）：主軸為水平方向昧捷，起點(diǎn)在左端闲昭。
-
row-reverse：主軸為水平方向，起點(diǎn)在右端靡挥。
對(duì)應(yīng)的效果如下：
image.png
flex-wrap設(shè)置項(xiàng)目是否在一條線上序矩，默認(rèn)項(xiàng)目都排在一條線上為nowrap
- flex-wrap: wrap 換行，第一行在上方
- flex-wrap: nowrap （默認(rèn)）不換行
- flex-wrap: wrap-reverse換行跋破，第一行在下方
flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式贮泞，默認(rèn)值為row nowrap
justify-content屬性定義項(xiàng)目在主軸上的對(duì)齊方式，默認(rèn)值為flex-start
- flex-start（默認(rèn)值）：左對(duì)齊
- flex-end：右對(duì)齊
- center： 居中
- space-between：兩端對(duì)齊幔烛，項(xiàng)目之間的間隔都相等啃擦。
-
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以饿悬，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍令蛉。
image.png
align-items屬性定義項(xiàng)目在縱軸上的對(duì)齊方式，默認(rèn)值為stretch狡恬，適用于項(xiàng)目在縱軸上高度不一樣的情況珠叔，為了更好的看到效果，我為項(xiàng)目添加了一些樣式
- flex-start：交叉軸的起點(diǎn)對(duì)齊弟劲。
- flex-end：交叉軸的終點(diǎn)對(duì)齊祷安。
- center：交叉軸的中點(diǎn)對(duì)齊。
- baseline: 項(xiàng)目的第一行文字的基線對(duì)齊兔乞。
-
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto汇鞭，將占滿整個(gè)容器的高度。
image.png
align-content屬性定義了多根軸線的對(duì)齊方式庸追。如果項(xiàng)目只有一根軸線霍骄，該屬性不起作用。(即需要設(shè)置容器的flex-wrap屬性值為wrap)(為了讓效更加明顯淡溯，我設(shè)置了容器的高度)
- flex-start：與交叉軸的起點(diǎn)對(duì)齊读整。
- flex-end：與交叉軸的終點(diǎn)對(duì)齊。
- center：與交叉軸的中點(diǎn)對(duì)齊咱娶。
- space-between：與交叉軸兩端對(duì)齊米间，軸線之間的間隔平均分布。
- space-around：每根軸線兩側(cè)的間隔都相等膘侮。所以屈糊，軸線之間的間隔比軸線與邊框的間隔大一倍。
-
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸喻喳。
image.png
項(xiàng)目的屬性
- order 屬性定義項(xiàng)目的排列順序另玖。數(shù)值越小，排列越靠前，默認(rèn)為0谦去。
- flex-grow 屬性定義項(xiàng)目的放大比例慷丽，默認(rèn)為0，即如果存在剩余空間鳄哭，也不放大要糊。
- flex-shrink 屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1妆丘，即如果空間不足锄俄，該項(xiàng)目將縮小。
- flex-basis 屬性定義了在分配多余空間之前勺拣，項(xiàng)目占據(jù)的主軸空間（main size）奶赠。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間药有。它的默認(rèn)值為auto毅戈，即項(xiàng)目的本來(lái)大小。
- flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫愤惰，默認(rèn)值為0 1 auto苇经。后兩個(gè)屬性可選。
- align-self 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式宦言，可覆蓋align-items屬性扇单。默認(rèn)值為auto，表示繼承父元素的align-items屬性奠旺，如果沒(méi)有父元素蜘澜，則等同于stretch。
實(shí)例
網(wǎng)格布局
最簡(jiǎn)單的網(wǎng)格布局凉倚，就是平均分布兼都。在容器里面平均分配空間，跟上面的骰子布局很像稽寒，但是需要設(shè)置項(xiàng)目的自動(dòng)縮放。
<div class="Grid">
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
百分比布局
某個(gè)網(wǎng)格的寬度為固定的百分比趟章，其余網(wǎng)格平均分配剩余的空間杏糙。
<div class="Grid">
<div class="Grid-cell u-1of4">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell u-1of3">...</div>
</div>
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
}
.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4 {
flex: 0 0 25%;
}
圣杯布局
圣杯布局（Holy Grail Layout）指的是一種最常見(jiàn)的網(wǎng)站布局。頁(yè)面從上到下蚓土，分成三個(gè)部分：頭部（header）宏侍，軀干（body），尾部（footer）蜀漆。其中軀干又水平分成三欄谅河，從左到右為：導(dǎo)航、主欄、副欄绷耍。
<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 兩個(gè)邊欄的寬度設(shè)為12em */
flex: 0 0 12em;
}
.HolyGrail-nav {
/* 導(dǎo)航放到最左邊 */
order: -1;
}
如果是小屏幕吐限，軀干的三欄自動(dòng)變?yōu)榇怪悲B加。
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
輸入框的布局
我們常常需要在輸入框的前方添加提示褂始，后方添加按鈕诸典。
<div class="InputAddOn">
<span class="InputAddOn-item">...</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...</button>
</div>
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
懸掛式布局
有時(shí)，主欄的左側(cè)或右側(cè)崎苗，需要添加一個(gè)圖片欄狐粱。
<div class="Media">
<img class="Media-figure" src="" alt="">
<p class="Media-body">...</p>
</div>
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
margin-right: 1em;
}
.Media-body {
flex: 1;
}
固定的底欄
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
流式布局
每行的項(xiàng)目數(shù)固定，會(huì)自動(dòng)分行胆数。
.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}
