flex布局

flex布局概述

①任何一个容器都可以使用flex布局

②当为父盒子设置flex布局后，子元素的float clear vertical-align属性将会失效

③采用flex布局的元素，称为flex容器，子元素称为flex项目，简称子项，父元素为父项

flex布局特点

①父项开启flex布局后（display: flex;），子项的块级 行内 行内块属性消失，并且可以设置宽高，子项默认宽度为内容的宽度，高度为父项的高度

②子项的float浮动将会失效，但子项的position transform margin等属性还会生效

③当子项的宽度超出父项的宽度时，子项不会自动换行，只会压缩自身的宽度

父项上添加的属性

（tips：flex布局子项默认不换行，可以给父项添加flex-wrap: wrap; 来使子项换行排列，默认值为nowrap）

1.flex布局之设置主轴对齐方式（justify-content）

①flex-start 设置子项左对齐

②flex-end 设置子项右对齐

③center 设置子项居中

④space-between （sb）先两侧对齐，剩下的子项居中然后分配剩余空间

⑤space-around 两边间隔小于中间

⑥space-evenly 绝对平分

2.flex布局之设置侧轴对齐方式

(1).align-items 单行

①flex-start 设置子项上对齐

②flex-end 设置子项下对齐

③center 设置子项居中

(2).align-content 多行

①flex-start 设置子项左对齐

②flex-end 设置子项右对齐

③center 设置子项居中

④space-between （sb）先两侧对齐，剩下的子项居中然后分配剩余空间

⑤space-around 两边间隔小于中间

⑥space-evenly 绝对平分

3.flex布局之设置主轴方向 （flex-direction）

① row 默认值，x轴为主轴

② row-reverse x轴为主轴同时从右到左排列，类似右浮动

③ column 设置y轴为主轴

④ column-reverse y轴为主轴同时从右到左排列，类似右浮动

子项上添加的属性

1.flex: number;

设置子项占父项剩余宽度的比例，number为所占的比例

2.align-self

设置子项自身在侧轴上的排列

①flex-start 设置子项左对齐

②flex-end 设置子项右对齐

③center 设置子项居中