本文共 1957 字，大约阅读时间需要 6 分钟。
Flex布局（Flexible Box，弹性布局）
Flex布局是什么：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以使用Flex[布局]
| 布局使用 | |
|---|---|
| 一般 | display：flex； |
| 行内元素 | display：inline-flex； |
| Webkit内核的浏览器 | display：-webkit-flex; |
| 注意点： | 使用Flex布局后，子元素的float、clear、vertical-align属性即将失效 |
| 八大Webkit内核浏览器 |
|---|
| Webkit是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（IE 使用）。 同时WebKit也是苹果Mac OS X体统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。 |
| Google Chrome 谷歌浏览器 Safari浏览器 搜狗高速浏览器 遨游浏览器3 QQ浏览器 360极速浏览器 世界之窗浏览器 阿里云浏览器 WebKit是一个开源的项目。 |
基本概念：采用Flex布局的元素称为Flex容器。其中所有的子元素自动成为容器成员，称为Flex项目。
容器的属性：
| 容器的六个属性 | |
|---|---|
| flex-direction 决定主轴的方向 | flex-direction:row（主轴为水平方向，起点在左端）|row-reverse（主轴为水平方向，起点在右端）|column（主轴为垂直方向，起点在上沿）|column-reservse(主轴为垂直方向，起点在下沿) |
| flex-wrap 一行，满自动换行 | flex-wrap:nowrap(默认不换行)|wrap（换行且第一行在上）|wrap-reverse（换行且第一行在下） |
| flex-flow flex-direction属性和flex-wrap属性的简写 | flex-flow：|| 其中默认值为row nowrap （nowrap是不换行） |
| justify-content 定义项目在主轴上的对齐方式 | justify-content：flex-start(默认值，左对齐|flex-end（右对齐）|center（居中）|space-between（两端对齐，项目之间的间隔相等）|space-around（项目间隔相等，项目之间的间隔比项目与边框的间隔大一倍）) |
| align-items 定义项目在交叉轴上如何对齐 | align-items：flex-start(交叉轴的起点对齐)|flex-end（交叉轴的终点对齐）|center（交叉轴的中点对齐）|baseline（项目的第一行文字的基线对齐）|stretch（默认值，项目没有设置高度或者设置成auto，讲占满整个容器的高度） |
| align-content 定义多根轴线的对齐方式 | alig-content：flex-start（与交叉轴的起点对齐）|flex-end（与交叉轴的终点对齐，即最下面）|center（与交叉轴的中点对齐）|space-between（与交叉轴的两端对齐，轴线之间的间隔平均分布）|space-around（每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍）|stretch（默认值，轴线占满整个交叉轴） |
4.项目属性
| 项目的六个属性 | |
|---|---|
| order 定义项目的排列顺序 | order：整数值 |
| flex-grow 定义项目放大比例 | flex-grow： 默认值是0 |
| flex-shrink 定义了项目的缩小比例 | flex-shink： 默认值是1 （越大缩小倍数越大） |
| flex-basis 义了在分配多余空间之前，项目占据的主轴空间（main size） | flex-basis: | auto; /* default auto */ 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 |
| flex 是flex-grow, flex-shrink 和 flex-basis的简写 | flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] 默认值为0 1 auto。后两个属性可选 |
| align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 | align-self: auto | flex-start | flex-end | center | baseline | stretch; 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 |
原博客：
转载地址：http://jbcki.baihongyu.com/