讀文章《Flexbox詳解》筆記

　　文章地址：Flexbox詳解

　屬性摘抄：

　　　　flex container :

• display: other values | flex | inline-flex;
• flex-direction: row | row-reverse | column | column-reverse; 主要用來建立主軸，從而定義了伸縮項目放置在伸縮容器的方向。
• flex-wrap: nowrap | wrap | wrap-reverse; 主要用來定義伸縮容器裏是單行仍是多行顯示，側軸的方向決定了新行堆放的方向。
• flex-flow: <‘flex-direction’> || <‘flex-wrap’>; 這個是「flex-direction」和「flex-wrap」屬性的縮寫版本。同時定義了伸縮容器的主軸和側軸。其默認值爲「row nowrap」。
• justify-content: flex-start | flex-end | center | space-between | space-around; 這個是用來定義伸縮項目沿着主軸線的對齊方式。當一行上的全部伸縮項目都不能伸縮或可伸縮可是已經達到其最大長度時，這一屬性纔會對多餘的空間進行分配。當項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。
• align-content: flex-start | flex-end | center | space-between | space-around | stretch; 這個屬性主要用來調準伸縮行在伸縮容器裏的對齊方式。相似於伸縮項目在主軸上使用「justify-content」同樣。
• align-items: flex-start | flex-end | center | baseline | stretch; 伸縮項目在沿着側軸線的對齊方式。

　　　　flex items :

• order: <integer>; 默認狀況下（都爲0），伸縮項目是按照文檔流出現前後順序排列。然而，「order」屬性能夠控制伸縮項目在他們的伸縮容器出現的順序。
• align-self: auto | flex-start | flex-end | center | baseline | stretch; 用來在單獨的伸縮項目上覆寫默認的對齊方式。
• flex-grow: <number>; / default 0 / 根據須要用來定義伸縮項目的擴展能力。它接受一個不帶單位的值作爲一個比例。主要用來決定伸縮容器剩餘空間按比例應擴展多少空間。
• flex-shrink: <number>; / default 1 / 根據須要用來定義伸縮項目收縮的能力。[注意：負值一樣生效。]
• flex-basis: <length> | auto; / default auto / 這個用來設置伸縮基準值，剩餘的空間按比率進行伸縮。
• flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 這是「flex-grow」、「flex-shrink」和「flex-basis」三個屬性的縮寫。其中第二個和第三個參數（flex-shrink、flex-basis）是可選參數。默認值爲「0 1 auto」。

　幾個屬性運用的例子：

　　基本的html結構：

<div class="container">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<!-- 重複多個 -->

　　基本的css樣式：

 div { padding: 10px 20px; margin: 10px; border-radius: 10px; font-size: 2em; } .container { background: #eee; float: left; } .container div { background: #ccc; color: #fff; }

　　flex-flow:

 .container { display: flex; flex-flow: row wrap; width: 200px; } .container:nth-child(2) { flex-flow: row wrap-reverse; } .container:nth-child(3) { flex-flow: row-reverse wrap; } .container:nth-child(4) { flex-flow: row-reverse wrap-reverse; }

　　align-content:

 .container { display: flex; flex-flow: row wrap; width: 200px; height: 300px; } .container:nth-child(1) { align-content: flex-start; } .container:nth-child(2) { align-content: center; } .container:nth-child(3) { align-content: flex-end; } .container:nth-child(4) { align-content: stretch; } .container:nth-child(5) { align-content: space-around; } .container:nth-child(6) { align-content: space-between; }

　　align-items:

 .container { display: flex; flex-flow: row wrap; height: 300px; } .container:nth-child(1) { align-items: flex-start; } .container:nth-child(2) { align-items: flex-end; } .container:nth-child(3) { align-items: stretch; } .container:nth-child(4) { align-items: center; } .container:nth-child(5) { align-items: baseline; } .container div:nth-child(1) { line-height: 50px; } .container div:nth-child(2) { line-height: 100px; } .container div:nth-child(3) { line-height: 150px; } .container div:nth-child(4) { line-height: 200px; }

　　flex-grow:

 .container { display: flex; width: 60%; } .container div:nth-child(2) { flex-grow: 2; } .container:nth-child(2) div:nth-child(1) { flex-grow: 1; }

　　flex-shrink:

 .container { float: none; display: flex; width: 1000px; } .container div { width: 400px; text-align: center; } .container div:nth-child(2) { flex-shrink: 2; } .container:nth-child(1) div:nth-child(1) { flex-shrink: 0; } .container:nth-child(3) { width: 300px; } /* 超過項目收縮能力 */

　　flex-basis:

　　　　html:

<div class="container">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="container">
    <div>1</div><div>2</div><div>33333333</div><div>4</div>
</div>
<div class="container">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="container">
    <div>1</div><div>2</div><div>33333333</div><div>4</div>
</div>

　　　　css:

 .container { float: none; display: flex; width: 1000px; } .container div { flex-grow: 1; text-align: center; } .container div:nth-child(3) { flex-grow: 2; } .container:nth-child(3) div, .container:nth-child(4) div { flex-basis: 0; }