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