Flex语法
Flex
Flex作CSS3加入的弹性盒子。
.box{
display:flex
display:inline-flex
display:-webkit-flex /*Safari Chrome*/
}
Flex的属性
flex-flow
flex-flow:<flex-direction>||<flex-wrap>
例子:
flex-flow:row nowrap行排序、不换行flex-flow:column wrap列排序、换行
justify-content
justify-content:flex-start|flex-end|center|space-between|space-around

space-between
两侧贴边、项目间间隔相等。space-around
每两个项目之间间隔相等。
align-items
align-items:flex-start|flex-end|center|strench|baseline

order属性
决定顺序flex属性
flex:none|[<flex-grow> <flex-shrink> | <flex-basic>]- 其他属性
align-self不受到align-items影响
align-content多轴线对其
本文深入探讨了CSS3中Flex布局的基本概念与属性,包括display:flex的使用,flex-flow属性的详细解释,justify-content和align-items属性的作用,以及order和flex属性如何影响元素的排序与伸缩。此外,还介绍了align-self和align-content属性的用法。

被折叠的 条评论
为什么被折叠?



