Flex布局的使用语法

flex布局（父项）

弹性布局（任何一个盒子都可以指定为flex布局）

设了flex布局后，子元素的float，clear和vertical-align属性将失效

布局原理：给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见父项属性：

1.flex-direction:设置主轴的方向（默认x为主轴，y为侧轴，可设y轴为主轴，那么x轴为侧轴）

• row（默认从左往右,x轴）

• row-reverse(右往左)

• column(从上往下，y轴)

• column-reverse(从下往上)

2.justify-content:设置主轴上的子元素排列方式（定义对齐方式，默认为x轴）

• flex-start(默认从头部开始，如果主轴是x，则从左往右)

• flex-end(从尾部开始排列)

• center（在主轴居中对齐，主轴是x，则水平居中）

• space-around(平分剩余空间)

• space-between(先贴两边再平分剩余空间)重要！！

3.flex-wray:设置子元素是否换行（flex中默认的子元素是不换行的）

• nowrap(默认不换行)

• wray(换行)

4.align-content:侧轴的排列方式（多行，子轴出现换行情况）

• flex-start(从上到下)

• flex-end(从下到上)

• center（在侧轴中间显示）

• space-around(子项在侧轴平分剩余空间)

• space-between(子项在侧轴先分布在两头，在平分剩余空间)

• stretch(拉伸，子元素高度平分父元素高度)

5.align-items:设置侧轴的排列方式（单行，默认y轴）

• flex-start(从上到下)

• flex-end(从下到上)

• center（侧轴垂直居中）重要！！

• stretch(拉伸 少用 盒子不要给高度)

flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap（即主轴方向和子元素是否换行）