Flex复习属性详解

一、Flex产生及概述

布局，按照传统的解决方案做是基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。09年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

//1.任何一个容器都可以指定为Flex 布局
.box{
	display:flex;
}
//2.行内元素也可以使用Flex布局
.box{
	display:inline-flex;
}
//3.webkit内核的浏览器，必需加上-webkit前缀
.box{
	display:-webkit-flex;
	display:flex;
}

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、Flex基本概念

采用Flex布局display:flex的元素，称为Flex容器。它的所有子元素自动成为容器成员，称为Flex项目。弹性容器中的所有子元素称为弹性元素，弹性元素永远沿主轴排列。

1. 主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
2. 每根轴都有起点和终点，这对于元素的对齐非常重要。
3. 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
4. 弹性容器的两根轴非常重要，所有属性都是作用于轴的。

三、属性解析

属性预览

1.flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向），方向不管怎么变，主轴和交叉轴的起点都是在一起的。弹性元素永远沿主轴排列，主轴不同，弹性元素的排列方式也会发生改变。

flex-direction的值
row（默认值）	主轴为水平方向，起点在左端。
row-reverse	主轴为水平方向，起点在右端。
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿

2.flex-wrap

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线 排不下，如何换行。

flex-wrap的值
nowrap	不换行，元素自动压缩
wrap	向下换行
wrap-reverse	向上换行

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，flex-flow = flex-drection + flex-wrap。默认 row nowrap。

4.justify-content

justify-content属性定义了项目在主轴上的对齐方式

justify-content的值	项目在主轴上的对齐方式
flex-start（默认值）	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items

align-items属性定义项目在交叉轴上如何对齐

align-items的值	项目在交叉轴上的对齐方式
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐

6.align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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

align-items和align-content区别:
两者“作用域”不同:1.align-content管全局(所有行视为整体);2.align-items管单行

7.order

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

8.flex-grow

flex-grow属性定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。无多余宽度时，flex-grow无效。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目为1，则这个项目占据的剩余空间将比其他项多一倍。

9.flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，项目将缩小;值为0时不缩放。
元素宽度总和没有大于容器宽度时，此属性无效；
第一个元素flex-shrik:0; 其它都是1，所以第一个元素不压缩，其它都等比压缩。

10.flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

flex-basis为auto时，如设置了width则元素尺寸由width决定；没有设置则由内容决定。
对比：width: 0则完全没显示，flex-basis: 0 会根据内容撑开宽度
同时设置宽度width和flex-basis非0值：数值相同时两者等效，同时设置，flex-basis优先级高
若将主轴方向改为上→下，此时主轴上的尺寸是元素的height，flex-basis == height

11.flex

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为 flex: 0 1 auto。

flex: 1 = flex: 1 1 0;
flex: 2 = flex: 2 1 0;
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩

根据内容来撑开宽度，若大，等比缩小，若小，等分放大：

12.align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。

align-self值	单个项目的对齐方式
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器

四、总结