CSS Flexbox布局

之前说了block、inline、table、positioned等布局方式，而flexbox也是一种布局方式，基于flexbox布局，可以不用设置float或position而实现网页的自适应。

浏览器兼容性

下表是每种浏览器支持flexbox布局的最低版本。

布局方式
flexbox	29.0	11.0	22.0	10	48

Flexbox元素

使用flexbox布局，首先要定义一个flex类型容器。

如上所示，蓝色部分即为flex容器，而内部的3个div元素，即为3个flex项。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

运行一下

---

下面两张会分别深入介绍flexbox容器（container）和flexbox项（item），后文有时会分别简称为flex容器和flex项。