详解flex布局(flexbox)完整指南
/* 设置flex布局 */
.container {
display: flex;
flex-direction: row; /* 默认值，可以省略 */
flex-wrap: wrap; /* 允许换行 */
justify-content: flex-start; /* 水平方向上的对齐方式 */
align-items: flex-start; /* 垂直方向上的对齐方式 */
align-content: flex-start; /* 多行时交叉轴方向上的对齐方式 */
}
/* 子元素1，占据剩余空间 */
.child1 {
flex-grow: 1; /* 增长比例 */
}
/* 子元素2，固定宽度 */
.child2 {
width: 100px; /* 固定宽度 */
}
/* 子元素3，自动填充剩余空间 */
.child3 {
flex-grow: 1; /* 增长比例 */
flex-shrink: 1; /* 缩小比例 */
flex-basis: auto; /* 初始大小 */
}这段代码展示了如何使用flex布局来创建一个容器，并对其子元素进行布局设置，包括如何使子元素占据剩余空间、固定宽度和自动填充剩余空间。
评论已关闭