CSS中的彈性盒子總結(jié)

事實上它是一種新類型的盒子模型绷柒，也有書上稱作彈性伸縮盒布局志于。
比較新的布局方式：旨在提供一個更加有效的方式來布置，對齊和分布在容器之間的各項內(nèi)容废睦，即使它們的大小是未知或者動態(tài)變化的伺绽。
彈性布局的主要思想是讓容器有能力來改變項目的寬度和高度，以填滿可用空間（主要是為了容納所有類型的顯示設(shè)備和屏幕尺寸）的能力郊楣。

應(yīng)用恰當(dāng)?shù)膹椥圆季謱τ脩羰钟押勉究摇ｍ撁嬷兴性乜梢噪S著用戶的偏好縮放。

對于同時喜歡流動和定寬布局的設(shè)計師來說净蚤，彈性布局是完美的钥组，因為前兩種布局的優(yōu)點在彈性布局中都能找到。

一今瀑、彈性盒布局相關(guān)詞匯

圖中是一個 flex-direction 屬性為 row的彈性容器程梦，意味著其內(nèi)的彈性項目將根據(jù)既定書寫模式沿主軸水平排列，其方向為元素的文本流方向橘荠，在這個例子里屿附，為從左到右。

測試01.png

1.彈性容器(Flex container)

包含著彈性項目的父元素哥童。通過設(shè)置 display屬性的值為 flex或 inline-fle來定義彈性容器挺份。

2.彈性項目(Flex item)

彈性容器的每個子元素都稱為彈性項目。彈性容器直接包含的文本將被包覆成匿名彈性單元贮懈。

3.軸(Axis)

每個彈性框布局包含兩個軸匀泊。彈性項目沿其依次排列的那根軸稱為主軸(main axis)。垂直于主軸的那根軸稱為側(cè)軸(cross axis)朵你。

注意：主軸與側(cè)軸的概念

主軸就是彈性盒子子元素沿著排列的軸各聘；與主軸垂直的軸稱為側(cè)軸。

如果你有 row 或者默認(rèn)值,則主軸是水平方向抡医，側(cè)軸是垂直方向躲因。

如果你有 column,則主軸是垂直方向，側(cè)軸是水平方向忌傻。

4.方向(Direction)

彈性容器的主軸起點(main start)/主軸終點(main end)和側(cè)軸起點(cross start)/側(cè)軸終點(cross end)描述了彈性項目排布的起點與終點大脉，可以通過屬性設(shè)置方向。

5.行(Line)

根據(jù) flex-wrap 屬性水孩，彈性項目可以排布在單個行或者多個行中镰矿。此屬性控制側(cè)軸的方向和新行排列的方向。

6.尺寸(Dimension)

根據(jù)彈性容器的主軸與側(cè)軸荷愕，彈性項目的寬和高中衡怀，對應(yīng)主軸的稱為主軸尺寸(main size) ，對應(yīng)側(cè)軸的稱為側(cè)軸尺寸(cross size)安疗。

二抛杨、彈性盒布局屬性

1.不影響彈性盒子的屬性

由于彈性盒子使用了不同的布局算法，某些屬性用在彈性容器上沒有意義：

多欄布局模塊的 column-* 屬性對彈性項目無效荐类。
float與 clear對彈性項目無效怖现。使用 float將使元素的 display屬性計為block。
vertical-align 對彈性項目的對齊無效玉罐。

2.作用在父元素的屬性

（1）display: flex | inline-flex;

box：將對象作為彈性伸縮盒顯示屈嗤。（伸縮盒最老版本）

inline-box：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

flexbox：將對象作為彈性伸縮盒顯示吊输。（伸縮盒過渡版本）

inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示饶号。（伸縮盒過渡版本）

flex：將對象作為彈性伸縮盒顯示。

inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示季蚂。

（2）flex-flow（復(fù)合屬性）
設(shè)置或檢索伸縮盒對象的子元素排列方式茫船。可以同時設(shè)置 flex-direction/flex-wrap扭屁。

flex-direction (適用于父類容器的元素上):設(shè)置或檢索伸縮盒對象的子元素在父容器中的位置算谈。

row：橫向從左到右排列（左對齊），默認(rèn)的排列方式料滥。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;　　　　　//默認(rèn)值然眼，可以省略
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;　　　　　//如果無高度，默認(rèn)撐滿
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試02.PNG

row-reverse：反轉(zhuǎn)橫向排列（右對齊葵腹，從后往前排高每，最后一項排在最前面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: row-reverse;　　　　　//反轉(zhuǎn)橫向排列
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試03.PNG

column：縱向排列礁蔗，可理解為相對當(dāng)前主軸垂直方向觉义。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;　　　　　//垂直改變排列方向
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      /* width: 50px; */　　　　　//不設(shè)置寬度，默認(rèn)撐滿
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試04.PNG

column-reverse:反轉(zhuǎn)縱向排列浴井，從后往前排晒骇，最后一項排在最上面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: column-reverse;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試05.PNG

flex-wrap (適用于父類容器上) 設(shè)置或檢索伸縮盒對象的子元素超出父容器時是否換行磺浙。

nowrap：默認(rèn)值洪囤，當(dāng)子元素溢出父容器時不換行。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: no-wrap;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 150px;　　　　　//子元素寬度之和超出了父元素
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試06.PNG

wrap：當(dāng)子元素溢出父容器時自動換行撕氧。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 120px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試07.PNG

注意此時子元素最大寬度不會超過父元素瘤缩，即撐滿，但高度會超出

wrap-reverse：當(dāng)子元素溢出父容器時自動換行,方向同 wrap反轉(zhuǎn)排列伦泥。與row-reverse剥啤、column-reverse有區(qū)別锦溪。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap-reverse;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 120px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試08.PNG

（3）justify-content 設(shè)置或檢索彈性盒子元素在主軸方向上的對齊方式。

flex-start：默認(rèn)值府怯，彈性盒子元素將向行起始位置對齊刻诊。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: flex-start;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試09.PNG

flex-end：彈性盒子元素將向行結(jié)束位置對齊。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: flex-end;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試10.PNG

center：彈性盒子元素將向行中間位置對齊牺丙。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試11.PNG

space-between:彈性盒子元素會平均地分布在行里则涯，兩端靠邊。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試12.PNG

space-around:彈性盒子元素會平均地分布在行里冲簿，兩端保留子元素與子元素之間間距大小的一半粟判。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試13.PNG

（4）align-items 設(shè)置或檢索彈性盒子元素在側(cè)軸方向上的對齊方式。

flex-start：默認(rèn)值峦剔，彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界档礁。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: flex-start;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試14.PNG

flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: flex-end;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試15.PNG

center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置吝沫。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: center;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試16.PNG

baseline：大部分情況按子元素第一行基線對齊事秀。如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效野舶。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: baseline;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
      font-size: 2em;
    }
    .d3 {
      background: blue;
      font-size: 1.5em;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1H</div>
    <div class="d2 child">2H</div>
    <div class="d3 child">3H</div>
  </div>
</body>
</html>

測試17.PNG

stretch：默認(rèn)值易迹，如果子元素未設(shè)置高度或設(shè)為auto，將占滿整個父元素的高度平道。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: stretch;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
     /*  height: 50px; */
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試18.PNG

（5）align-content 設(shè)置或檢索彈性盒堆疊伸縮行的對齊方式睹欲，即定義了多根軸線的對齊方式。如果項目只有一根軸線一屋，該屬性不起作用窘疮。

flex-start：各行向彈性盒容器的起始位置堆疊，不留間隙冀墨。彈性盒容器中第一行的側(cè)軸起始邊界緊靠住該彈性盒容器的側(cè)軸起始邊界闸衫，之后的每一行都緊靠住前面一行。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: flex-start;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試19.PNG

flex-end：各行向彈性盒容器的結(jié)束位置堆疊诽嘉，不留間隙蔚出。彈性盒容器中最后一行的側(cè)軸起結(jié)束界緊靠住該彈性盒容器的側(cè)軸結(jié)束邊界，之后的每一行都緊靠住前面一行虫腋。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: flex-end;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試20.PNG

center：各行向彈性盒容器的中間位置堆疊骄酗，不留間隙。各行兩兩緊靠住同時在彈性盒容器中居中對齊悦冀，保持彈性盒容器的側(cè)軸起始內(nèi)容邊界和第一行之間的距離與該容器的側(cè)軸結(jié)束內(nèi)容邊界與第最后一行之間的距離相等趋翻。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: center;
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試21.PNG

space-between：各行在彈性盒容器中平均分布。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: space-between;
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試22.PNG

space-around：各行在彈性盒容器中平均分布盒蟆，兩端保留子元素與子元素之間間距大小的一半踏烙。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: space-around;
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試23.PNG

stretch：默認(rèn)值师骗，各行將會伸展以占用剩余的空間，但受設(shè)置高度影響讨惩。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      /* align-content: stretch; */
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
    /*   height: 50px; */
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
     /*  height: 35px; */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試24.PNG

3.作用在子元素的屬性

（1）align-self 設(shè)置或檢索彈性盒子元素自身在側(cè)軸方向上的對齊方式丧凤。

auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值步脓，如果其沒有父元素，則計算值為'stretch'浩螺。

flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界靴患。

flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。

center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置鸳君。（如果該行的尺寸小于彈性盒子元素的尺寸患蹂，則會向兩個方向溢出相同的長度）。

baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條传于，則該值與'flex-start'等效。其它情況下沼溜，該值將參與基線對齊，如果只有一個元素設(shè)置了baseline系草，相當(dāng)于flex-start通熄。

stretch：如果指定側(cè)軸大小的屬性值為'auto'唇辨，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸能耻。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
      align-self: auto;  //因為設(shè)置了高度晓猛，所以不會拉伸鞍帝，stretch效果一樣
    }
    .d2 {
      background: green;
      height: 25px;
      align-self: flex-end;
    }
    .d3 {
      background: blue;
      height: 35px;
      align-self: center;
    }
     .d4 {
      background: red;
      height: 35px;
      font-size: 2em;
      align-self: baseline;
    }
    .d5 {
      background: green;
      height: 50px;
      align-self: baseline;
    }
    .d6 {
      background: blue;
      /* align-self: stretch; */  //默認(rèn)效果
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d4 child">5H</div>
    <div class="d5 child">4</div>
    <div class="d6 child">6H</div>
  </div>
</body>
</html>

測試25.PNG

（2）order 用整數(shù)值來定義排列順序帕涌，數(shù)值小的排在前面，默認(rèn)值為0钦扭，可以為負(fù)值床绪。兩個order相同則按默認(rèn)排序

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 100px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
      order: 2
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
      order: 0;
    } 
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試26.PNG

（3）flex ( 復(fù)合屬性）
設(shè)置或檢索伸縮盒對象的子元素如何分配空間膀斋。
默認(rèn)計算值為：0 1 auto仰担。
none：none關(guān)鍵字的計算值為： 0 0 auto绩社。
auto ：auto 關(guān)鍵字的計算值為： 1 1 auto愉耙。

flex-grow 根據(jù)彈性盒子元素所設(shè)置的擴展因子作為比率來分配剩余空間朴沿。

默認(rèn)為0，即如果存在剩余空間龄毡，也不放大沦零。

如果只有一個子元素設(shè)置货岭，那么按擴展因子轉(zhuǎn)化的百分比對其分配剩余空間千贯。0.1即10%搔谴，1即100%，超出按100%峰弹。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 100px;
      background: yellow;
    }
    .child {
      width: 50px;　　　　　//設(shè)置了相同的寬度
      height: 50px;
    }
    .d1 {
      background: red;
      flex-grow: 1;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
      flex-grow: 1;
    } 
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試27.PNG

flex-shrink 設(shè)置或檢索彈性盒的收縮比率（根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間融师。）

屬性定義了項目的縮小比例蚁吝，默認(rèn)為1窘茁，即如果空間不足庙曙，該項目將縮小捌朴。

某元素設(shè)置為0张抄，不進行收縮署惯，寬度過大時會超出父元素极谊。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 100px;
      background: yellow;
    }
    .child {
      width: 150px;
      height: 50px;
    }
    .d1 {
      background: red;
      flex-shrink: 0;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
      flex-shrink: 2;
    } 
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試28.PNG

測試28中 d1 收縮比例為 0帆吻，不收縮咙边；d2 收縮比例默認(rèn)為 1败许，d3 收縮比例為 2，所以 d2晦溪、d3 最終1:2 收縮绪妹。

flex-basis 定義了在分配多余空間之前邮旷，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto畔况，即項目的本來大小。

auto：無特定寬度值，取決于其它屬性值。

用長度值/百分比來定義寬度尉姨。不允許負(fù)值。

相當(dāng)于重新定義寬度。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 100px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
      flex-basis: 100px;
    }
    .d2 {
      background: green;
      flex-basis: 30px;
    }
    .d3 {
      background: blue;
     
    } 
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

測試29.PNG

終于結(jié)束啦 O(∩_∩)O~~
為了方便記憶和查詢，簡單做了思維導(dǎo)圖

Flex布局屬性.png

最后編輯于：2017.12.10 03:33:28

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末汰蜘，一起剝皮案震驚了整個濱河市族操，隨后出現(xiàn)的幾起案子色难，更是在濱河造成了極大的恐慌枷莉，老刑警劉巖尺迂，帶你破解...
沈念sama閱讀 217,542評論 6贊 504
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件蹲盘，死亡現(xiàn)場離奇詭異州疾，居然都是意外死亡严蓖，警方通過查閱死者的電腦和手機颗胡，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,822評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門毒姨，熙熙樓的掌柜王于貴愁眉苦臉地迎上來弧呐，“玉大人俘枫，你說我怎么就攤上這事鸠蚪∶┬牛” “怎么了蘸鲸？”我有些...
開封第一講書人閱讀 163,912評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵棚贾，是天一觀的道長妙痹。經(jīng)常有香客問我怯伊，道長，這世上最難降的妖魔是什么崭篡？我笑而不...
開封第一講書人閱讀 58,449評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮颠毙，結(jié)果婚禮上蛀蜜，老公的妹妹穿的比我還像新娘增蹭。我一直安慰自己滋迈，他們只是感情好饼灿，可當(dāng)我...
茶點故事閱讀 67,500評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布橙依。她就那樣靜靜地躺著，像睡著了一般女责。火紅的嫁衣襯著肌膚如雪抵知。梳的紋絲不亂的頭發(fā)上刷喜，一...
開封第一講書人閱讀 51,370評論 1贊 302
城市分裂傳說
那天掖疮，我揣著相機與錄音浊闪，去河邊找鬼搁宾。笑死盖腿，一個胖子當(dāng)著我的面吹牛翩腐，可吹牛的內(nèi)容都是我干的栗菜。我是一名探鬼主播，決...
沈念sama閱讀 40,193評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼禁炒，長吁一口氣：“原來是場噩夢啊……” “哼幕袱！你這毒婦竟也來了们豌？” 一聲冷哼從身側(cè)響起望迎，我...
開封第一講書人閱讀 39,074評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤辩尊，失蹤者是張志新（化名）和其女友劉穎摄欲，沒想到半個月后胸墙，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體迟隅，經(jīng)...
沈念sama閱讀 45,505評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡嗽冒，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,722評論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年添坊，在試婚紗的時候發(fā)現(xiàn)自己被綠了贬蛙。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阳准。...
茶點故事閱讀 39,841評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡野蝇，死狀恐怖绕沈，靈堂內(nèi)的尸體忽然破棺而出乍狐，到底是詐尸還是另有隱情浅蚪，我是刑警寧澤惜傲，帶...
沈念sama閱讀 35,569評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布操漠，位于F島的核電站，受9級特大地震影響撞秋，放射性物質(zhì)發(fā)生泄漏吻贿。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,168評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一帐要、第九天我趴在偏房一處隱蔽的房頂上張望榨惠。院中可真熱鬧赠橙，春花似錦期揪、人聲如沸凤薛。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,783評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽帜矾。三九已至屡萤，卻和暖如春死陆，著一層夾襖步出監(jiān)牢的瞬間措译，已是汗流浹背领虹。一陣腳步聲響...
開封第一講書人閱讀 32,918評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工诉稍，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留杯巨，地道東北人舔箭。一個月前我還...
沈念sama閱讀 47,962評論 2贊 370
代替公主和親
正文我出身青樓层扶，卻偏偏與公主長得像镜会，于是被迫代替她去往敵國和親戳表。傳聞我的和親對象是個殘疾皇子匾旭，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,781評論 2贊 354