本文详细介绍了Flex布局中的核心属性，包括flex-direction、justify-content、align-items、flex-grow和flex-shrink。通过示例解释了每个属性的作用，如flex-direction用于设置主轴方向，justify-content用于主轴上的元素排布，align-items处理交叉轴上的对齐，而flex-grow和flex-shrink则分别定义元素如何占用多余空间和在空间不足时如何缩小。同时，提到了Webkit内核浏览器需要添加-webkit前缀，并且在Flex布局下，子元素的float、clear和vertical-align属性将失效。
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex常用属性（从高频往下罗列）
flex-direction （确定主轴的方向，默认row横向）
- flex-direction: row
- 主轴为水平方向，起点在左端
- flex-direction: column
- 主轴为垂直方向，起点在上沿
- flex-direction: row-reverse
- 主轴为水平方向，起点在右端
- flex-direction: column-reverse
- 主轴为垂直方向，起点在下沿
- 主轴为垂直方向，起点在下沿
最低0.47元/天 解锁文章
扫一扫
1062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
