Flex如何进行页面布局?

Flex（弹性盒布局）是一种灵活的布局方式，它可以让你在一个容器中轻松地排列、对齐和改变其中元素的大小、位置，这些容器可以是一行或一列，也可以是更复杂的结构，比如网格结构。Flex容器的子元素可以按照以下属性进行排列：

• flex-direction：定义子元素的排列方向，可以是row（默认）、row-reverse、column和column-reverse。

• flex-wrap：定义子元素是否换行，可以是nowrap（默认）、wrap和wrap-reverse。

• flex-flow：用于简写flex-direction和flex-wrap。

• justify-content：定义子元素在主轴上的对齐方式，可以是flex-start（默认）、flex-end、center、space-between和space-around。

• align-items：定义子元素在交叉轴上的对齐方式，可以是stretch（默认）、flex-start、flex-end、center和baseline。

• align-content：定义多根轴线的对齐方式，可以是stretch（默认）、flex-start、flex-end、center、space-between和space-around。