Web 前端布局
FlexBox CSS 属性分类
Tailwind CSS 布局相关工具类
css
.flex {
display: flex; /*应用在容器元素，启用 Flexbox 布局*/
}
.flex-col {
flex-direction: column; /*应用在容器元素，设置主轴方向为垂直*/
}
.flex-1 {
flex: 1; /*应用在子元素，设置自动填充*/
}
.shink-0 {
flex-shrink: 0; /*应用在子元素，设置禁止缩小*/
}
.overflow-hidden {
overflow: hidden; /*应用在容器元素，设置溢出隐藏*/
}
.overflow-auto {
overflow: auto; /*应用在容器元素，设置溢出自动*/
}左右布局
- 默认为左右布局
- 父元素添加
overflow-hidden防止溢出 - 子元素添加
overflow-auto设置溢出自动滚动 - 子元素添加
flex-1或shink-0设置自动填充或禁止缩小
上下布局
添加flex-col设置垂直布局