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。