彈性盒子模型詳解

1、前言

因爲W3C在制定彈性盒模型內容有多版草案，在網上瀏覽了不少視頻和文章，版本有新有舊，因此準備寫一篇關於彈性盒模型的文章，一是輔助本身學習，二是幫忙其餘前端學習者更容易地彈性盒模型。

2、彈性盒模型歷史

彈性盒模型歷史英文原版或者查看中文翻譯版
另外附上w3c css3-flexbox標準文檔

彈性盒模型在過去幾年間W3C制定了三版草案(規範)。

若是你看到了display:box;或者「box-{*}屬性，那麼你看的正是2009年版本的Flexbox。

若是你看到了display:flexbox;或者「flex()函數，那麼你看的正是2011年版本的Flexbox。

若是你看到了display:flex;和flex-{*}屬性，那麼你查看的是當前（在寫此文時）的規範。

本文將以display:flex;書寫。

3、兼容性

使用兼容性查詢網站Can I Use查詢flex

4、基礎知識

1. 彈性容器（flex container）

2. 彈性子元素（flex item）

3. 主軸（彈性子元素沿着主軸方向排列）；側軸（垂直於主軸方向）

4. 主軸起點(main start);主軸終點(main end);主軸起點(cross start);主軸起點(cross end);

5. display:flex;爲塊級彈性元素display:inline-flex;爲行內彈性元素
   

5、屬性簡介

1.彈性容器屬性（圖中內容關係：屬性－屬性值）

2.彈性子元素屬性

5、屬性詳解

1. 學習方式一（推薦）：css flexbox試驗場

2. 學習方式二：flex屬性指南（先看目錄，直接選擇對應屬性查看便可）

6、使用

使用flexbox只須要在父元素上設置display屬性便可。
.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction:row;
  ......
}

若是您想讓它之內聯方式顯示，則
.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
  flex-direction:row;
  ......
}
#注意：僅僅須要在父元素上設置這一個屬性便可，它的子元素會自動變成flex items。
給子元素直接添加屬性便可
.flex-item{
  flex:1 1 auto;
  ......
}

7、後話

1. 以上是本文全部內容，如下是小白個人感慨。

2. 這是本小白（Vagor）第一篇本身原創的文章，但願大神看到多加提點。

3. 我以後會努力更新原創文章，並以我本身的風格（只留下原創的部分，多引入其餘大神文章的精粹內容，給讀者更清晰的思路）去展現。

4. 如對個人文章感興趣，請關注微信公衆號「每日前端」，天天分享一篇優質前端文章。