建議大家看完阮一峰老師的Flex 布局教程：語法篇再看這篇文章；另：本文中的思維導圖使用新建標簽頁的方式打開才能看的清楚。

一、使用flex布局注意事項

使用flex后，子元素的clear 、float（使用 float 將使元素的 display 屬性計為block。）、vertical-align及多欄布局模塊的column-*均會失效；

二、flex布局的兼容性

Paste_Image.png

三、塊級元素及行內元素flex布局用法

對于塊級元素可直接使用display:flex，（當然你也可以用display:inline-flex，注意他們的區別即可）對于行內元素可使用display:inline-flex；

四、flex布局基本概念

元素采用了flex布局，則該元素稱為容器（flex container），其所有子元素稱為項目（flex item）；容器默認存在兩個軸---橫向的主軸main，縱向的交叉軸cross，主軸開始的地方叫做main start（與邊框的交叉點），結束的地方叫main end，單個項目占據主軸的空間稱為main size，同理，交叉軸開始的地方叫做cross start 結束的地方叫做 cross end，單個項目占據交叉軸的空間叫做cross size；項目默認沿主軸排列。

五、容器的6大屬性

flex布局容器的6大屬性.png

1、 align-items屬性補充點：
1、使用align-items：stretch 屬性時必須將每一塊的高度指定為auto，否則高度屬性（height）就會將stretch作用的屬性給覆蓋掉；
2、對于使用align-items： baseline來說，如果元素標簽內無文字或其子標簽內無文字，均會按照每個塊的底部對齊；如下圖：

無文字align-items： baseline

2、flex-direction 屬性補充點
a、使用row-reverse或者column-reverse后，flex-end及flex-start對應的方向也被調轉了。這是在做青蛙游戲的第十關發現的。。。。
b、同樣的道理，當flex-direction的值為column時，justify-content變成了控制豎直方向而align-content變成了控制水平方向了。

六、項目的6大屬性

flex布局項目的6大屬性.png

** （一）、flex屬性補充點**：

1、flex:非負數字，這種寫法表示的是

flex-grow:非負數字;
flex-shrink: 1;
 flex-basis: 0%;

2、flex:auto 這種寫法表示的是

flex-grow:1;
flex-shrink: 1;
 flex-basis: auto;

3、flex:長度或百分比
這種寫法表示的是

flex-grow:1;
flex-shrink: 1;
 flex-basis: 長度或百分比;

4、flex：非負數字非負數字這種寫法表示的是

flex-grow:非負數字;
flex-shrink: 非負數字;
 flex-basis: 0%;

5、flex：非負數字長度或百分比這種寫法表示的是

flex-grow:非負數字;
flex-shrink: 1;
 flex-basis: 長度或百分比;

** （二）、flex-basis屬性補充點**：

1、flex-basis指定了 flex 元素在主軸方向上的初始大小, flex-basis:100% 這個100%是相對于父容器的，例如：http://output.jsbin.com/qinufonujo

Paste_Image.png

我將第二個div的flex-basis設置成了100%，它的寬度就變成了350px，與容器的寬度相等；

2、對于flex-basis更深一步的理解


<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width: 140px;
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        width: 100px;
        flex: 2 1 auto;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 200px;
        background: lightblue;
    }
</style>
<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>

在線版http://output.jsbin.com/xowihaweti
上述代碼瀏覽器解析后，item-1、item-2、item-3的寬度分別為120px，220px，260px；那么瀏覽器是怎么計算的呢？

a、首先我們來看下剩余空間的計算：剩余空間=600px（容器的寬度）- 0px（0px為 item-1的基準空間即flex屬性中的0%）- 100px（item-2的基準空間即flex屬性中的auto及width:100px）- 200px（item-3的基準空間即flex屬性中的200px）= 300px；
b、剩余空間的分布：由于有剩余空間且flex-shrink均為1，因此我們看下他們的flex-grow--- item-1、item-2、item-3分別為2,2,1；因此item-1和item-2各占了2/5， item-3 占了1/5；因此item-1及item-2的增長幅度均為300 乘以 2/5 為 120px，item-3的增長幅度為300乘以1/5為60px；
c、綜上所述， item-1的寬度為0px+120px=120px， item-2的寬度為100px+120px=220px， item-3的寬度為200px+60px=260px；

上面我們可以看到雖然 item-1 聲明了 width: 140px ，但是由于 flex: 2 1 0% 的存在，width: 140px這條語句是無效的。不信，我們可以隨意改下這個數值，發現并無任何變化。（如果同時設置flex-basis和width，那么width屬性會被覆蓋，也就是說flex-basis的優先級比width高。有一點需要注意，如果flex-basis和width其中有一個是auto，那么另外一個非auto的屬性優先級會更高。）其實通過這個例子，我們還可以知道flex:auto與flex:1并不是等價的！ (flex:auto是flex-grow:1;flex-shrink:1;flex-basis:auto;的簡寫，flex:1是flex-grow:1;flex-shrink:1;flex-basis:0%的簡寫;)
關于flex-basis的詳細介紹可參考w3c官網：猛戳此處

w3c官網介紹flex-basis

在看阮一峰老師的博客flex布局中的圣杯布局部分，當時看到

.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 {
  /* 兩個邊欄的寬度設為12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 導航放到最左邊 */
  order: -1;
}

中的flex:1 不是很理解，為什么不用flex:auto。現在看這個w3c的文檔就很容易理解為什么了。（flex:1等同于flex:1,1,0%，而flex:auto等同于flex:1,1,auto；）

3、關于flex-shrink的理解，可以看下面的代碼:

<style>
.container {
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 150px;
    background-color: #eee;
}
.B {
    height: 100px;
}
.B1{
    background-color:rgba(255,255,0,.5);
    width: 300px;
    -webkit-flex-grow:1;
    -moz-flex-grow:1;
    flex-grow:1;
    -webkit-flex-shrink:2;
    -moz-flex-shrink:2;
    flex-shrink:2;
}
.B2{
    background-color:rgba(255,0,255,.5);
    width: 160px;
}
.B3{
    background-color:rgba(0,255,255,.5);
    width: 120px;
}
</style>
<div class="container">
    <div class="B B1">width:300</div>
    <div class="B B2">width:160</div>
    <div class="B B3">width:120</div>
</div>

假設B2，B3被縮小了s1(壓縮率)，則B1被縮小了s2（壓縮率）；
那么存在 s2=2*s1; 500=300*s2+160*s1+120*s1;

順便提下，在查資料時，發現了MDN上有一個錯誤：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

Paste_Image.png

但是單獨介紹flex-grow的頁面又是正確的：

Paste_Image.png

七、測試flex各個屬性網站推薦

http://the-echoplex.net/flexyboxes/

可以在該網頁的右側選擇flex相應參數，直接查看各個元素的變化。

Paste_Image.png

八、flex布局練習--骰子篇（練習flex容器）

可以好好看下阮一峰的這篇文章，試著自己先寫完再看他的答案。下面我總結下自已看這個應該注意的幾點：

1、剛開始的時候我差點把align-items和justify-content搞錯了。。。

justify-content

align-items

其實記憶起來很簡單，在flex-direction為row或者row-reverse時，justify-content是管水平方向的，而align-items是管豎直方向的；可以看下面的圖理解下：

justify-content示意圖

align-items示意圖

2、flex-direction：column 會將主軸的水平方向變成垂直方向，如下圖：

Paste_Image.png

因此，

Paste_Image.png

這個圖的正確寫法是：

.box{
display:flex;
flex-direction:column;
justify-content:between;
align-items:center;
}

同理：

Paste_Image.png

這個圖的寫法是：

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

也就是說使用flex-direction，使得主軸的方向由水平變成了豎直方向，交叉軸的方向由豎直方向變成了水平方向；

3、對于有多軸情況的，我們應該想到align-content，例如下面的圖：

Paste_Image.png

這個圖的寫法是：

.box{
flex-wrap:wrap;
justify-content:flex-end;
align-content:space-between;
}

4、對于某些情況需要使用flex-basis的，記得使用；
比如：

Paste_Image.png

HTML代碼：

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

CSS代碼：

.box{
display:flex;
flex-wrap:wrap;
align-content:space-between;
}
.column{
display:flex;
flex-basis:100%;
justify-content:space-between;
}

九、flex布局練習--游戲篇

1、青蛙游戲 http://flexboxfroggy.com/#zh-cn

通關

2、塔防游戲 http://www.flexboxdefense.com/

通關

十、其他布局的補充

除了flex布局還有網格布局及多列布局：

1、網格布局 CSS Grid Layout

關于它與flex的對比，可參考grid layout 和其它布局方法的聯系
和 Hold住CSS布局新屬性。里面都提到flex只是一維布局（沿橫向或縱向），而CSS Grid Layout屬于二維布局（同時沿橫向和縱向）；也就是說如果我們只想單獨控制行或者列時，我們可以考慮使用flex布局，如果我們想要同時同時行和列時，我們可以考慮使用網格布局。還有一種方法來決定我們是使用彈性盒還是網格布局就是：彈性盒布局是從內容出發的，而網格布局是從布局出發的。值得一提的是網格布局的兼容性目前相對彈性盒布局來說不是很好，見下圖：

Paste_Image.png

2、多列布局 CSS3 Multiple column layout

它的兼容性見下圖：

Paste_Image.png

**本文版權歸本人即簡書筆名：該賬戶已被查封所有，如需轉載請注明出處。謝謝！ *

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

flex布局基礎知識整理

flex布局基礎知識整理

一、使用flex布局注意事項

二、flex布局的兼容性

三、塊級元素及行內元素flex布局用法

四、flex布局基本概念

五、容器的6大屬性

六、項目的6大屬性

七、測試flex各個屬性網站推薦

八、flex布局練習--骰子篇（練習flex容器）

九、flex布局練習--游戲篇

十、其他布局的補充

1、網格布局 CSS Grid Layout

2、多列布局 CSS3 Multiple column layout

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

flex布局基礎知識整理

一、使用flex布局注意事項

二、flex布局的兼容性

三、塊級元素及行內元素flex布局用法

四、flex布局基本概念

五、容器的6大屬性

六、項目的6大屬性

七、測試flex各個屬性網站推薦

八、flex布局練習--骰子篇（練習flex容器）

九、flex布局練習--游戲篇

十、其他布局的補充

1、網格布局 CSS Grid Layout

2、多列布局 CSS3 Multiple column layout

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频