关于基本布局之——Flex布局

Flex布局

1.Flex为"Flexible Box"的简称，即为弹性布局，可作用于任何容器上。给div这类块状元素元素设置display:flex或者给span这类内联元素设置display:inline-flex，flex布局即创建！

其中，直接设置display:flex或者display:inline-flex的元素称为flex容器，里面的子元素称为flex子项。

(flex和inline-flex区别在于，inline-flex容器为inline特性，因此可以和图片文字一行显示；flex容器保持块状特性，宽度默认100%，不和内联元素一行显示。)

2.Flex布局的属性分为两种，即作用域容器上和作用于flex子项上：

无论作用在flex容器上，还是作用在flex子项，都是控制的flex子项的呈现，只是前者控制的是整体，后者控制的是个体。

子元素的float、clear和vertical-align属性将失效。

1. flex-direction ：决定主轴的方向（即项目的排列方向）语法如下：

flex-direction: row | row-reverse | column | column-reverse;

row：默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。如果当前水平文档流方向是rtl（如设置direction:rtl），则从右往左。
row-reverse：显示为行。但方向和row属性值是反的。
column：显示为列。
column-reverse：显示为列。但方向和column属性值是反的。

2.flex-warp：用来控制子项整体单行显示还是换行显示，如果换行，则下面一行是否反方向显示。

flex-warp: nowarp | warp | warp-reserve;

3.flex-flow：属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性，语法如下：

flex-flow: (flex-direction) || (flex-warp);

当多属性同时使用的时候，使用空格分隔。

4.justify-contet：属性决定了主轴方向的子项的对齐和分布方式。

justify-contet: flex-start | flex-end | center | space-between | space-around | space-evenly;

5.align-items：属性决定了交叉轴方向的子项的对齐和分布方式

align-items: stretch | flex-start | flex-end | center | baseline;

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

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

1. order：可以通过设置order改变某一个flex子项的排序位置。（order越小顺序越靠前）

order：integer; (整数值，默认为 0)

2.flex-grow：属性定义项目的放大比例，默认为0；扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。

flex-grow：number; (默认为 0

3.flex-shrink：属性定义了项目的缩小比例，默认为1；shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。

flex-shrink：number; (数值，默认为 1)

例子：现在只给第2个flex子项b元素设置flex：shrink

4.flex-basis：定义了在分配剩余空间之前元素的默认大小。（它可以设为跟width或height属性一样的值（比如100px），则项目将占据固定空间。）

flex-basisi：<length> | auto; (数值，默认为auto)

默认值是auto，就是自动。有设置width则占据空间就是width，没有设置就按内容宽度来。
如果同时设置width和flex-basis，就渲染表现来看，会忽略width。以下例子设置width：100px, flex-basis：150px；最终显示为150px；
选择最后一个flex-basis:240px会发现flex子项的宽度并不是240px，因为此时剩余空间不足，3个子项1:1:1收缩的缘故。

5.flex：属性是flex-grow，flex-shrink和flex-basis的缩写。（默认值为 0 1 auto）

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

其中第2和第3个参数（flex-shrink和flex-basis）是可选的。默认值为0 1 auto。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6.align-self：指控制单独某一个flex子项的垂直对齐方式，写在flex容器上的这个align-items属性，后面是items，有个s，表示子项们，是全体；这里是self，单独一个个体。其他区别不大，语法几乎一样。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

唯一区别就是align-self多了个auto（默认值），表示继承自flex容器的align-items属性值。其他属性值含义一模一样。