讀文章《Flexbox詳解》筆記 - noteit－IT工程師數位筆記本

文章出處

　　文章地址：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; }