CSS之Flex布局

布局的传统解决方案，基于盒子模型，依赖display属性+position属性+float属性。对于那些特殊布局很是不方便。

是什么

Flex布局，意思是弹性布局，用来为盒子模型提供最大的灵活性。
任何一个容器均可以指定为Flex布局。

注意

1. WebKit内核的浏览器，必须加上-webkit前缀。

display: -webkit-flex
复制代码

2. 设置为Flex布局以后，子元素的flaot，clear和vertical-align属性将失效。

基本概念

Flex容器/项目

采用Flex布局的元素，称为Flex容器。简称容器，它的全部子元素自动成为容器成员，成为Flex项目。

Flex主轴/交叉轴

容器默认存在两跟轴。水平方向称为主轴，垂直方向称为交叉轴。
项目默认沿主轴排布。

Flex容器属性

共有6个属性，以下：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction

该属性决定主轴的方向。
值： row/column/ reverse-row/reverse-column
默认值为： row主轴为水平方向，起点在左边。

flex-wrap

默认状况下，项目都排在一条轴线上。该属性定义，若是一个轴线排列不下，是否换行。
值: nowrap/wrap/wrap-reverse（换行，第一行在下面)
默认值为 nowrap 表示不换行

flex-flow

flex-flow是flex-direction和flex-wrap的简写模式。默认值为 row nowrap。
可是不常见，仍是分开写。

justify-content

定义了项目在主轴上的对齐方式。
值： flex-start/center/flex-end/space-between/space-around
默认值是：flex-start 左对齐
注意： 
space-between 表示 两端对齐，项目之间的间隔都相等（项目与左右边距没有距离） 记忆方法 between 表示项目间距离
space-around  每一个项目两侧的距离相等（项目到左右边距的距离为项目间距离的一半）记忆方法 around表示项目周围，包括项目与左右边界的距离

align-items

定义项目在交叉轴上如何对齐。
默认值: stretch
值为：

• flex-start  交叉轴起点对齐
• center 中点对齐
• flex-end 终点对齐
• stretch 默认值 若是项目未设置高度，将占满整个容器的高度。
• baseline 第一行的文字基线对齐。

align-content

定义了多根轴线的对齐方式，若是只有一个轴线，则不起做用。
默认值： stretch
值：

• flex-start 与交叉轴的起点对齐
• flex-end 与交叉轴的终点对齐
• center 与交叉轴的中点对齐
• space-between 与交叉轴两段对齐，轴线之间的间隔平均分布（与交叉轴 之间没有距离）
• space-around 每根轴线两侧的距离都相等（与交叉轴 之间有距离）

Flex项目属性

项目属性共有6个：

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. aign-self

order

定义项目的排列顺序。数值越小，排列越靠前。
默认为0。

flex-grow 放大比例 0

定义项目的放大比例。默认为0，表示不放大，即若是存在剩余空间，也不放大。
若是其余项目的flex-grow属性都为1，则它们将等分剩余空间。
若是有的项目的flex-grow属性不一样，则会按比例分配空间。

flex-shrink 缩小比例 1

定义项目的缩小比例。默认为1，即若是空间不足，该项目会缩小。
若是全部项目的flex-shrink属性都为1，那么当空间不足时，都将等比例缩小（默认状况下，或缩小）
若是一个项目的flex-shrink属性为0，那么当空间不足时，其余项目缩小，该项目不缩小。
负值对该属性无效。

flex-basis 固定空间 auto

（须要再理解）
定义了在分配多余空间之间，项目占据的主轴空间。 浏览器根据这个属性，来计算主轴是否还有剩余空间。
默认值为auto，表示项目的原来大小。

.item {
	flex-basis:<length>/auto
}
复制代码

能够设定和宽度高度同样的值，则项目将占据固定空间。

flex

flex属性是 flex-grow，flex-shrink，flex-basis三个属性的缩写形式。
默认值是 0，1，auto
还有两个快捷值，auto（1，1，auto） none（0，0，auto）
建议优先使用这个属性。

flex取值问题

1. flex 取值为auto  flex-grow 为 1 ，flex-shrink 1 flex-basis 为auto（表示自动缩放）
2. flex取值为none flex-grow 为  0，flex-shrink 0 flex-basis 为auto
3. flex取值为一个非负数字 这个数字为flex-grow的值，flex-shrink为 1 flex-basis 取 0 %（ 设置 flex-grow的值，会自动缩小）
4. 当flex取值为一个长度或者百分比 设置 flex-basis的值，flex-grow为1  flex-shrink为1 （表示自动缩放）
5. 当flex取值为两个非负数字 这两个数字 flex-grow 和flex-shrink的值。

flex： 1 表明什么？

align-self

align-self属性容许单个项目与其余项目不同的对齐方式，可覆盖align-items属性。默认值是auto。表示继承父元素的align-items属性，若是没有父元素，则等同于stretch。