flex弹性布局

flex弹性布局

flex布局表示弹性布局，为盒装模型提供最大的灵活性，任何一种元素都可以指定为flex布局。
在父级元素设置为flex布局后，子元素float\clear\vertical-align属性都将失效，所以在使用flex布局时，不应该先设置完子元素布局后使用。

• 父级元素采用flex布局，n那么父级元素就称作容器，其所有的子元素就称作为项目
• 容器中默认有水平的主轴和垂直的交叉轴
• 项目在容器中默认沿主轴排列

容器的常用属性

1. flex-direction
   设置容器主轴的方向

• row:默认值，表示沿水平方向，由左到右
• row-reverse:表示沿水平方向，由右到左
• column:表示垂直方向，由上到下
• column-reverse:表示垂直方向，由下到上

2. flex-wrap
   设置党项目在容器中一行无法显示的时候如何处理

• nowrap:表示不换行（此时设置的项目宽度就失效了，强行显示在一行）

• wrap：正常换行，第一个位于第一行的第一个

• wrap-reverse:向上换行，第一行位于下方

3. flew-flow
   flex-deriction和flex-wrap属性的简写
   第一个属性值为flex-deriction的属性值
   第二个属性值为flex-wrap的属性值

4. justify-content
   设置项目在容器中对齐的方式

• flex-start:默认值，左对齐

• flex-end:右对齐

• center:居中对齐

• space-around:每个项目两侧的间距相等

6. align-items
   定义项目在交叉轴上是如何对齐显示的

flex-start:交叉轴的起点对齐

flex-end:交叉轴的终点对齐

center:交叉轴居中对齐

baseline:项目的第一行文字的基线对齐

stretch:默认值，如果项目未设置高度，将占满整个容器的高度

7. align-content

项目的常用属性

1. order
   设置项目排序的位置，默认值为0，数值越小越靠前
2. flex-grow
   控制当前项目是否放大显示，默认值为0，表示即使容器有剩余也不放大显示，如果设置为1，则平均分摊后放大显示
3. flex-shrink
   表示元素的缩小比例，默认值为1，如果空间不够用时所有的同比缩小。
   如果设置为0，则空间不足时也不缩小
4. flex-basis
   表示项目占据主轴空间的值，默认为auto，表示当前默认的大小
   如果设置为一个固定的值，则该项目在容器中占据固定大小。
5. flex
   flex 是flex-grow 、 flex-shink和flex-basis的简写
6. align-self