肉渣教程

Flexbox 简介

上一节 下一节

CSS Flexbox布局

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

浏览器兼容性

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

布局方式
flexbox 29.0 11.0 22.0 10 48

Flexbox元素

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

1
2
3

如上所示,蓝色部分即为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项。


Flexbox 简介

上一节 下一节