Flex布局 + Grid布局

Flex布局

flexible box弹性盒子 — 任何元素都可以指定为flex布局

flex布局：父元素—容器（flex container），子元素—项目（flex item）

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

**注意：**当父盒子设为flex布局后，子元素的float、clear、vertical-align属性都失效

容器属性

1. 指定为flex布局

display: flex;
/* 父元素指定为flex布局后，子元素都可以设置宽高 */

2. 设置主轴方向

flex-direction: row / row-reverse / column / column-reverse;

3. 设置主轴上子元素排列方式

justify-content: flex-start;默认值

flex-start / flex-end / center
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间

4. 设置换行

flex-warp: nowrap / wrap;

/* 复合写法 */
flex-flow: column wrap;设置主轴方向 允许换行

5. 设置侧轴上子元素的排列方式（单行）

align-items: center / flex-start / flex-end / stretch子盒子不给高度时拉伸;

6. 设置侧轴上子元素的排列方式（多行）

align-content: flex-start;默认值

flex-start / flex-end / center / stretch
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间

项目属性

1. flex子项目占的份数

flex: number;
flex: 1;

2. 控制子项目自己在侧轴上的排列方式

align-self: auto;默认
center / flex-start / flex-end / stretch

3. order定义项目排列顺序

/* 数值越小，排列越靠前，默认为0，可以负值 */