flex弹性盒子解析

1.Flex的介绍

官方说法：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

我的说法：flex就是一种布局方式，想让他上下居中可方便了，还有等分等等功能。

2.Flex的概念

采用Flex布局的元素，称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目(Flex item),简称"项目"。

上面是关于元素成为flex布局之后的方向

flex容器中包含两个相互垂直的轴, 即主轴 (main axis)和副轴 (cross axis).

flex元素沿主轴从主轴起点 (main start)到主轴终点 (main end)依次排布.

如果flex容器包含多行flex元素, 则flex行 (flex lines)沿副轴从副轴起点 (cross start)到副轴终点 (cross end)依次排布.

---

单个flex元素占据的主轴空间叫做主轴长度 (main size), 占据的副轴空间叫做副轴长度 (cross size).

这边来介绍flex的布局所拥有的属性：

1.容器的属性

1.(1)flex-direction（主轴的方向）

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

 

 

 

 

 

(2)flex-wrap（一条轴线排不下，如何换行）

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }   属性值说明： nowrap（默认值）：不换行。 wrap：换行到下一行。 wrap-reverse：换行到上一行。

 

 

 

 

 

(3)flex-flow（flex-direction和flex-wrap的简写形式）默认值是row nowrap

.box { flex-flow: <flex-direction> || <flex-wrap>; }   属性值说明： 可以用容器属性的第二点跟第三点合并的写法

 

 

(4)justify-content（子元素在主轴上的对齐方式）

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

 

 

 

 

 

 

(5)align-items（子元素在交叉轴上的对齐方式）

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

 

 

 

 

 

 

(6)align-content（多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用）

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 属性值说明： flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。

 

 

 

 

 

 

 

 

 

1.项目的属性（子元素）

(1)order（定义项目的排列顺序，数值越小越靠前，默认是0）

.item { order: <integer>; }

 

(2)flex-grow（定义项目的放大比例，默认0，即如果存在剩余空间的话也不放大）

.item { flex-grow: <number>; /* default 0 */ } 属性值说明：        如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。        如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

 

 

 

(3)flex-shrink（定义项目的缩小法比例，默认1，即如果空间不足，该项目将缩小）

.item { flex-shrink: <number>; /* default 1 */ }   属性值说明：        如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。        如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

 

 

 

(4)flex-basis（定义项目在分配多余空间之前，项目占据主轴的空间）

.item { flex-basis: <length> | auto; /* default auto */ } 属性值说明：         它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

 

 

(5)flex（flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto）

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

 

(6)align-self（允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性）

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

 

 

 

下面是我截图了几张关于flex布局的介绍图：

3.flex会遇到的问题

在使用flex布局的时候子元素的float、clear和vertical-align属性将失效哦

一般用这个布局时建议是移动端哈~

想要深入学习的话可以看阮一峰的网络日志

1.讲解：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2.实例：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

如果想尝试可以用这个链接去手动写一些效果
https://codepen.io/EagleChinaWu/pen/gOwPOGd