弹性盒子模型

flex布局

•  dom里面的元素使用display: flex则表示为父元素也表示开始使用弹性盒子布局(称:容器)
• 弹性盒子分为伸缩容器(父级)和伸缩项目(子级)
• 设置了弹性盒子的元素被称为容器，内部子元素称为项目

注:设置flex布局以后，子元素的float、clear和vertical-align属性将失效
1.flex-direction 排列盒子方向

值	描述
row	默认值。元素将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	元素将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。

2.flex-wrap 换行方式

值	描述
nowrap	默认值。规定元素不拆行或不拆列。
wrap	规定元素在必要的时候拆行或拆列。
wrap-reverse	规定元素在必要的时候拆行或拆列，但是以相反的顺序。

图片介绍:

1. nowrap(默认)：不换行。

   

2. wrap：换行，第一行在上方。

   

3. wrap-reverse：换行，第一行在下方。

   

3.flex-flow 属性

• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，
• 默认值为row nowrap。

flex-flow: <flex-direction> <flex-wrap>;

4. justify-content 属性

值	描述
flex-start	默认值。项目位于容器的开头。（主轴开始位置对齐）
flex-end	项目位于容器的结尾。（主轴结束位置对齐）
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。（两端对齐）
space-around	项目位于各行之前、之间、之后都留有空白的容器内。（左右两端占一个间隔，中间的元素之间的间隔是两个间隔）

5.align-items属性

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
baseline	项目位于容器的基线上。

6.align-content 属性 (多行对齐)​​​​​​​

值	描述
stretch	默认值。项目被拉伸以适应容器。
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐。
center	与交叉轴的中点对齐。
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。