用最通俗易懂的语言教你CSS flex布局

css中，flex、grid 各种布局都是我们必须掌握的，作为常用功能又强大的flex布局你还没学会吗，全文没有一张图，用最通俗易懂的语言教你怎么用css中的flex布局。

父容器属性

开启flex

display: flex;

控制子元素水平方向对齐

justify-content: flex-start/center/flex-end/space-between/space-around/space-evenly;

flex-start/center/flex-end 子元素之间没有留白

space-between/space-around/space-evenly 子元素之间留白相等

• flex-start => [ a b c ######## ]
• center => [ #### a b c #### ]
• flex-end => [ ######## a b c ]
• space-between => [ a ### b ### c ] (两端无留白)
• space -evenly => [ ## a ## b ## c ## ] (两端留白和子元素之间留白相等)
• space-around => [ # a ### b ### c # ] (两端留白是子元素之间留白的一半)

以上是针对于父容器的flex-direction属性为行模式的时候

列模式时，justify-content和align-items的作用倒转过来，分别是

• justify-cont