flex 布局是 css3 中使用最頻繁也是最出色的功能，有點(diǎn)復(fù)雜，分為應(yīng)用在容器上的屬性和項(xiàng)目上的屬性，即父元素上的與子元素上的屬性。
父元素上的屬性
- display: flex
<style>
div{display: flex; background-color: yellow;}
b{background-color: red;}
</style>
<body>
<div>
<b>a</b><b>b</b><b>c</b><b>d</b><b>e</b><b>f</b><b>g</b><b>h</b><b>i</b>
</div>
</body>
當(dāng)父元素設(shè)置為 flex 后，其父元素自身會(huì)表現(xiàn)成塊級(jí)元素，如果想表現(xiàn)為行內(nèi)元素，可以使用 inline-flex。 所有子元素不管是塊級(jí)的還是行內(nèi)的，會(huì)立即變成行內(nèi)布局，這是其他屬性的默認(rèn)值所致的，后面可以修改。
- flex-direction
<style>
div{display: flex; background-color: yellow; margin: 5px;}
div.row{ flex-direction: row;}
div.row-reverse{ flex-direction: row-reverse;}
div.column{ flex-direction: column;}
div.column-reverse{ flex-direction: column-reverse;}
b{background-color: red;}
</style>
<body>
<div class="row">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="row-reverse">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="column">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="column-reverse">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</body>
flex-direction 決定子元素的排列方向，默認(rèn)值 row。
- flex-wrap
<style>
div{display: flex; background-color: yellow; margin: 5px; }
div.nowrap{ flex-wrap: nowrap;}
div.wrap{ flex-wrap: wrap;}
div.wrap-reverse{ flex-wrap: wrap-reverse;}
b{background-color: red; width: 100px;}
</style>
<body>
<div class="nowrap">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="wrap">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="wrap-reverse">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</body>
flex-wrap 決定子元素超出一行時(shí)應(yīng)該如何處理，默認(rèn)值 nowrap 會(huì)壓縮子元素的寬度，wrap 是換行，wrap-reverse 則是向上增加新一行。注意：這是在主軸為X軸的前提下討論的。
- justify-content
<style>
b{background-color: red; }
div{display: flex; background-color: yellow; margin: 5px; }
div.start{ justify-content: flex-start;}
div.end{justify-content: flex-end;}
div.center{ justify-content: center;}
div.space-between{ justify-content: space-between;}
div.space-around{ justify-content: space-around;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="end">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="center">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="space-between">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="space-around">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</body>
justify-content 決定子元素在主軸（當(dāng)前是X軸）上的位置，默認(rèn)值 flex-start。space-between 與 space-around 的間隔是多余空間平分出來的，但后者會(huì)為左右端也計(jì)入空間。
- align-items
<style>
b{background-color: red; width: 40px;}
b:nth-child(1){}
b:nth-child(2){font-size: 30px; height: 40px;}
b:nth-child(3){height: 50px;}
b:nth-child(4){height: 60px;}
div{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; }
div.start{ align-items: flex-start;}
div.end{ align-items: flex-end;}
div.center{ align-items: center;}
div.baseline{ align-items: baseline;}
div.stretch{ align-items: stretch;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="end">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="center">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="baseline">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="stretch">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</body>
align-items 決定副軸（當(dāng)前為Y軸）上元素的對(duì)其方式。默認(rèn)值 stretch，表示當(dāng)子元素不設(shè)置高度時(shí)，充滿父類高度。
- align-content
<style>
b{background-color: red; width: 100px;}
div{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; height: 70px;}
div.start{ align-content: flex-start;}
div.end{ align-content: flex-end;}
div.center{ align-content: center;}
div.space-between{ align-content: space-between;}
div.space-around{ align-content: space-around;}
div.stretch{ align-content: stretch;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="end">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="center">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="space-between">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="space-around">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="stretch">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</body>
align-content 表示子元素有多行時(shí)，每行在副軸（當(dāng)前為Y軸）上的位置。默認(rèn)值 stretch，表示變動(dòng)子元素每行的高度，直到充滿父元素。
子元素上的屬性
- order
<style>
div{display: flex; background-color: yellow; margin: 5px;}
b{background-color: red; }
b.test{order: -1;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</body>
order 表示從小到大排列同級(jí)元素，默認(rèn)值 0。
- flex-grow
<style>
div{display: flex; background-color: yellow; margin: 5px;}
b{background-color: red; }
b.test{flex-grow: 1; background-color: green;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</body>
flex-grow 表示當(dāng)主軸（當(dāng)前為X軸）上有剩余空間時(shí)，平分空間時(shí)所占的比例。默認(rèn)值 0，表示不占空間。當(dāng)前空間平分比例為 0 : 0 : 1 : 0，所以 c 占據(jù)所有剩余空間。
- flex-shrink
<style>
div{display: flex; background-color: yellow; margin: 5px;}
b{background-color: red; width: 100px; flex-shrink: 0;}
b.test{flex-shrink: 1; background-color: green;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</body>
flex-shrink 表示當(dāng)主軸（當(dāng)前為X軸）空間不足以填充所有子元素時(shí)，應(yīng)該如何壓縮子元素，默認(rèn)值 1，表示 1 : 1 : 1 : 1，即等比壓縮，當(dāng)前比例為 0 : 0 : 1 : 0，表示所有空間由 c 來壓縮。
- flex-basis
<style>
div{display: flex; background-color: yellow; margin: 5px;}
b{background-color: red; flex-grow: 1;}
b.test{flex-basis: 100px; background-color: green;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</body>
flex-basis 表示當(dāng)主軸（當(dāng)前為X軸）上平分空間前，先占據(jù)的位置，當(dāng)主軸為X軸，與設(shè)置 width 是等效的，當(dāng)主軸為Y軸，與設(shè)置 height 是等效的。默認(rèn)值 auto，表示與 width 或 height 相等。
- align-self
<style>
div{display: flex; background-color: yellow; margin: 5px;}
b{background-color: red; flex-grow: 1;}
b:nth-child(1){height: 20px;}
b:nth-child(2){height: 40px;}
b:nth-child(3){height: 50px;}
b:nth-child(4){height: 60px;}
b.test{align-self: flex-end; background-color: green;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</body>
align-self 表示當(dāng)前元素可以覆蓋父元素 align-items 所決定的副軸（當(dāng)前為Y軸）上的方向。默認(rèn) auto，即不設(shè)置。可選擇與 align-items 一致，auto | flex-start | flex-end | center | baseline | stretch 。
