Flex弹性盒模型（新老版本完整）--移动端开发整理笔记（二）

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

Flex布局

Flex即Flexible Box，写法为：display：flex(旧版：display: -webkit-box)

在Webkit内核下，需要加-webkit前缀:

.box{ display: -webkit-flex; //safari display: flex; }

注意：

1.css 列（CSS columns）在弹性盒子中不起作用

2.float, clear and vertical-align 在flex项目中不起作用

新旧兼容写法：

.box{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ }要注意的是，如果子元素是行内元素，在很多情况下都要使用 display:block 或 display:inline-block 把行内子元素变成块元素（例如使用 box-flex 属性），这也是旧版语法和新版语法的区别之一。

容器属性

flex-direction / -webkit-box-orient(老版)
flex-wrap / -webkit-box-lines（老版）
flex-flow
justify-content / -webkit-box-pack（老版）
align-items / -webkit-box-align(老版)
align-content

1.flex-direction属性

新版：

.box { flex-direction: row | row-reverse | column | column-reverse; } //此属性决定主轴的方向row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。

老版：

.box { -webkit-box-orient:horizontal 水平显示 | vertical 垂直方向 } 元素在主轴上排列为反序： -webkit-box-direction: reverse; //注意： box 写法的 box-direction 只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式元素在主轴上排列为正序： -webkit-box-direction: normal;

新旧兼容写法：

.box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } // 右到左排序.box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: vertical; -moz-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } //下到上

2.flex-wrap属性

新版：

.box{ flex-wrap: nowrap | wrap | wrap-reverse; } //默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap(默认): 不换行; wrap: 换行，第一行在上方; wrap-reverse: 换行，第一行在下方;

老版：

.box{ box-lines: single | multiple; /*允许换行：不允许（默认） | 允许*/ }

3.flex-flow属性

.box { flex-flow: <flex-direction> || <flex-wrap>; }//flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4.justify-content属性

新版：

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }flex-start（默认值）：左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

老版：

.box {

-webkit-box-pack: start //所有子元素在盒子左侧显示，富裕空间在右侧 end //所有子元素在盒子右侧显示，富裕空间在左 center //所有子元素居中 justify //富裕空间在子元素之间平均分布 }

5.align-items属性

新版：

.box { align-items: flex-start | flex-end | center | baseline | stretch; }//align-items属性定义项目在交叉轴（竖直）上如何对齐。flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

老版：

-webkit-box-align：start | end | center

6.align-content属性

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }//align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。

子元素属性

order / -webkit-box-ordinal-group(老版)
flex-grow / -webkit-box-flex(老版)
flex-shrink
flex-basis
flex
align-self

1.order属性

.item { order: <integer>; }//order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2.flex-grow属性

.item { flex-grow: <number>; /* default 0 */ }//flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.flex-shrink属性

.item { flex-shrink: <number>; /* default 1 */ }//flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

4.flex-basis属性

.item { flex-basis: <length> | auto; /* default auto */ }flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5.flex属性

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }//flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6.align-self属性

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }//align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。