css - flex布局

采用 Flex 布局的容器称为【Flex 容器】，所有子元素自动成为【容器成员】，成为【Flex 项目】

Flex 容器默认存在【两根轴】，水平的【主轴】和垂直的【交叉轴】

Flex 容器属性

• flex-direction：决定主轴的方向（项目的排列方式），可选值：【row、row-revers、colum、colum-reverse】
• flex-wrap：默认情况下，项目都排列在轴线上，如果超出一行，该属性定义如何换行，可选值：【nowrap、wrap、wrap-reverse】
• justify-content：定义项目在主轴上的对齐方式，可选值：【flex-start、flex-end、center、space-between、space-around】
• align-items：定义项目在交叉轴上的对齐方式（单行或多行），可选值：【flex-start、flex-end、center、baseline、stretch】
• align-content：定义多根轴线的对齐方式（多行），如果项目只有一根轴线则不生效，可选值：【flex-start、flex-end、center、space-between、space-around、stretch】