flex布局

1.flex布局使用步骤：

• 设计好dom结构
• 将父盒子设置为伸缩盒子（display:flex;）
• 明确需要的主侧轴方向，并设置flex-direction
• 设置父盒子的属性来调整子元素的布局
• 设置父元素的宽度高度或比例，完成具体的子元素在父盒子中的布局

2.flex布局父项常见属性

（1）flex-direction设置主轴方向

• 主轴：水平向右
• 侧轴：垂直向下

属性值：主侧轴可设置

• row:默认值从左到右
• row-reverse:从右向左
• column:从上到下
• column-reverse:从下到上

（2）justify-content设置主轴上的子元素排列方式

使用这个属性前一定要确定好哪个是主轴

• flex-start:默认值，从头部开始，如果主轴是x，则从左到右
• flex-end:从尾部开始排列
• center:在主轴居中对齐
• space-around:平分剩余空间
• space-between:先两边贴边，在平分剩余空间

（3）flex-wrap设置子元素是否换行

flex布局默认子元素不换行，如果装不开，会缩小子元素宽度，在一行上显示

• nowrap:默认值，不换行
• wrap:换行

（4）align-items设置侧轴上的子元素排列方式

• flex-start:默认值，从上到下
• flex-end:从下到上
• center:挤在一起集中（垂直居中）
• stretch:拉伸

（5）align-content设置侧轴上的子元素的排列方式（多行）

flex-wrap:wrap;适用于换行情况下

• flex-start
• flex-end
• center
• space-around
• space-between
• stretch：设置子项元素高度平分父元素高度

（6）flex-flow

flex-direction和flex-wrap属性的复合属性

3.flex布局子项常见属性

flex子项占的份数

align-self:控制子项自己在侧轴的排列方式

order属性定义子项的排列顺序（前后顺序）

（1）flex属性（份数）

.item {

flex:[number];

}

（2）align-self控制子项自己在侧轴上的排列方式

span:nth-child(2) {

/*设置自己在侧轴上的排列方式*/

align-self:flex-end;

}

（3）order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

注意：和z-index不同