弹性盒子模型详解

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. 如对个人文章感兴趣，请关注微信公众号“每日前端”，天天分享一篇优质前端文章。