重点知识flex布局

• 主轴对齐方式
• 副轴对齐方式
• 修改主轴对齐方式
• 溢出换行
• 溢出换行以后行与行之间的距离
• 覆盖之前的弹性布局样式

flex布局

给父盒子添加display：flex，开启flex布局

主轴对齐方式

justify-content:开启主轴对齐方式，属性名：

flex-start:元素沿着主轴起边排列（不常用）

flex-end:元素沿着主轴终边排列（不常用）

center:元素居中排列（常用）

space-around: 空白分布到元素两侧,两侧空白距离偏小,元素中间空白距离是相加（常用）

space-between:空白均匀分布到元素中间,两边没有空白（常用）

space-evenly:空白分布到元素的单侧,空白距离相同（常用）

副轴对齐方式

align-items：开启副轴对齐方式，属性名：

stretch：默认值,将元素的长度设置为相同的属性值（不常用）

flex-start：元素不会拉神,沿着副轴起边对齐（不常用）

flex-end：沿着副轴的终边对齐（不常用）

center：居中对齐（常用）

baseline：基线对齐（不常用）

注意点：子盒子如果有高度则按照自己的高度来；子盒子没有高度，会按照父盒子高度进行拉伸；子盒子没有高度，设置了侧轴对齐方式，就是内容高度。

如果行内元素，被开启了flex布局，就可以设置宽高

修改主轴对齐方式

flex-direction：修改主轴对齐方式，属性名：

row：默认值,弹性元素可在容器中水平排列(左向右)（不常用）

row-reverse：弹性元素在容器中方向水平排列(右向左)（不常用）

column：弹性元素纵向排列(自上向下)（常用）

colum-reverse：弹性元素方向纵向排列(自下向上)（不常用）

溢出换行

flex-wrap：溢出换行语法，属性：

nowrap，不换行（默认值）；

wrap，换行（常用）

溢出换行以后行与行之间的距离

align-content：换行以后，行于行之间的距离；

用法和justify-content:的用法一样

覆盖之前的弹性布局样式

align-self：加属性，给某一个子盒子设置数值

父盒子 子盒子：nth-child（n） {
align-self：样式

}