本文深入探讨了Flex布局，包括如何通过display属性创建flex容器和项目，以及容器的主轴方向、项目排列方式和空间处理。通过flex-direction属性，可以改变主轴方向，如row-reverse实现从右向左的排列。实例代码展示了如何将容器设置为column-reverse，使项目从下至上排列。此外，文章还强调了项目在主轴空间不足时的自动收缩特性，以及保持自身大小不填充多余空间的特点。
flex 容器与项目
display属性序号
属性值
描述
备注
1
flex;
创建 flex 块级容器
内部子元素自动成为 flex 项目
2
inline-flex;
创建 flex 行内容器
内部子元素自动成为 flex 项目
flex 容器与项目特征序号
容器/项目
默认行为
1
容器主轴
水平方向
2
项目排列
沿主轴起始线排列(当前起始线居左)
3
项目类型
自动转换”行内块级”元素,不管之前是什么类型
4
容器主轴空间不足时
项目自动收缩尺寸以适应空间变化,不会换行显示
5
容器主轴存在未分配空间时
项目保持自身大小不会放大并充满空间
1.flex 容器主轴方向
1.1 flex-direction属性序号
属性值
描述
1
row默认值
主轴水平: 起始线居中,项目从左到右显示
2
row-reverse
主轴水平:起始线居右, 项目从右向左显示
3
column
主轴垂直: 起始线居上,项目从上向下显示
4
column-reverse
主轴垂直: 起始线居下,项目从下向上显示
练习代码：
Document/* 容器 */
.container{
width:300px;
height:300px;
}
/* 将容器/父元素设置为flex容器 */
.container{
display:flex;
flex-direction:column-reverse;
/* display: inline-flex; */
}
/* 项目/子元素 */
.item{
width:100px;
height:300px;
background-color:red;
font-size:2rem;
}
1
扫一扫
999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
