Flex弹性盒子与容器属性

Flex盒子模型

采用Flex布局的元素，成为Flex容器（flex container）。它的所有子元素自动成为容器成员，成为Flex项目（Flex item）

水平的轴称为主轴，竖直的轴称为交叉轴。水平轴开始的地方称为main start，结束的地方称为main end；同理，交叉轴开始的地方称为cross start，交叉轴结束的地方称为cross end。对于单个flex item而言，其所占据的主轴空间称为main size，在交叉轴所占据的空间被称为cross size。

Flex容器的属性

flex-direction；

其作用是决定主轴的方向（即项目的排列方向）

flex-wrap；

默认情况下，项目都排在一条轴线上，如果一条轴线排不下的换行方式，

flex-flow

flex-direction属性和flex-wrap属性的简写形式

justify-content；

定义了项目在主轴上的对齐方式

align-items；

定义项目在交叉轴上如何对齐。

align-content

多轴线对齐方式，如果项目只有一条轴线，则该属性不起作用。

举例

注：

以上知识囊括以及之前的css，js，响应式布局的文章总结均来自b占up主罗大富bigrich。