理解了上述两个概念,接下来我们就比较容易理解Flex弹性布局了。要是用弹性布局,块级元素设置display:flex;行内元素设置display:inline-flex;将该元素设置为Flex容器。表明该元素内的子元素将使用弹性布局。注意设置成Flex容器之后,内部子元素(以下称为子项)的浮动和对齐属性都会失效。接下来我们对Flex容器的各个属性进行说明。
flex-direction 子项的排列方向,分为从左到右,从右到左,从上到下,从下到上
flex-wrap 子项排列不下之后是否换行,分为不换行,排到下一行,排到上一行
flex-flow 上面两个属性的组合,如可以直接设置从左到右排列,排不下排到下一行。
justify-content 子项在排列方向上的对齐方式,(横向说明)分为左对齐,右对齐,居中对齐,两端对齐中间等分布局和全部等间距布局
align-items 子项在另一个方向上的对齐方式,(横向说明)分为上对齐,下对齐,居中对齐,上下拉伸充满,子项首行文字对齐