CSS3 弹性盒子 (Flexbox)
Flexbox（弹性盒子布局）是 CSS3 中提供的一种新的布局模型，它使得在容器中分布空间和对齐元素变得更加容易，尤其是在复杂的布局需求下。Flexbox 主要通过设置父容器（称为“flex容器”）的属性，来控制子元素（称为“flex项目”）的布局。
基本概念
- Flex容器：使用
display: flex或display: inline-flex来创建弹性盒子容器。 - Flex项目：弹性盒子容器中的直接子元素。
- 主轴（Main Axis）：默认情况下，主轴是水平方向（从左到右），但可以通过属性调整。
- 交叉轴（Cross Axis）：与主轴垂直的轴线，通常是垂直方向（从上到下）。
常用的 Flexbox 属性
1️⃣ 创建弹性盒子容器
使用 display: flex 将元素设置为弹性盒子容器。所有的子元素自动成为 flex item（弹性项目）。
.container {
display: flex; /* 将容器设置为弹性盒子 */
}
2️⃣ 设置主轴方向（flex-direction）
flex-direction 用来定义主轴的方向，可以控制子元素在容器中的排列方式。
row（默认值）：主轴为水平，子元素从左到右排列。column：主轴为垂直，子元素从上到下排列。row-reverse：主轴为水平，子元素从右到左排列。column-reverse：主轴为垂直，子元素从下到上排列。
.container {
display: flex;
flex-direction: row; /* 子元素水平排列（默认） */
}
3️⃣ 控制换行（flex-wrap）
flex-wrap 控制子元素是否换行：
nowrap（默认）：所有元素在一行内显示。wrap：元素如果超出容器宽度，会换行。wrap-reverse：元素换行，但换行的方向是反向的。
.container {
display: flex;
flex-wrap: wrap; /* 如果空间不足，子元素会换行 */
}
4️⃣ 主轴对齐（justify-content）
justify-content 用于控制子元素沿主轴的对齐方式。
flex-start（默认值）：将子元素对齐到主轴的起点。flex-end：将子元素对齐到主轴的终点。center：将子元素对齐到主轴的中心。space-between：子元素之间的间距相等，且第一个和最后一个子元素靠近容器的两端。space-around：子元素之间的间距相等，但每个子元素两侧都有间距。
.container {
display: flex;
justify-content: space-between; /* 子元素均匀分布，且第一个和最后一个靠边 */
}
5️⃣ 交叉轴对齐（align-items）
align-items 用于控制子元素沿交叉轴（垂直方向）的对齐方式。
stretch（默认值）：子元素伸展以填满容器。flex-start：子元素对齐到交叉轴的起点。flex-end：子元素对齐到交叉轴的终点。center：子元素对齐到交叉轴的中心。baseline：子元素的基线对齐。
.container {
display: flex;
align-items: center; /* 子元素沿交叉轴居中对齐 */
}
6️⃣ 交叉轴对齐（align-self）
align-self 允许单个子元素覆盖 align-items 的设置，控制其在交叉轴方向上的对齐方式。
auto（默认值）：使用容器上的align-items设置。flex-start：子元素对齐到交叉轴的起点。flex-end：子元素对齐到交叉轴的终点。center：子元素对齐到交叉轴的中心。baseline：子元素的基线对齐。stretch：子元素伸展以填满容器。
.item {
align-self: flex-end; /* 该子元素沿交叉轴对齐到终点 */
}
7️⃣ 元素伸展和收缩（flex-grow, flex-shrink, flex-basis）
flex-grow: 子元素的扩展因子，决定了子元素在主轴方向上占据的剩余空间。flex-shrink: 子元素的收缩因子，决定了在空间不足时，子元素如何缩小。flex-basis: 子元素的初始尺寸，指定在分配空间前的基础大小。
通过 flex 属性，可以简化上述三者的写法。
.item {
flex-grow: 1; /* 子元素占据剩余空间 */
flex-shrink: 1; /* 子元素在空间不足时缩小 */
flex-basis: 100px; /* 初始大小为 100px */
}
/* 或者简写为： */
.item {
flex: 1; /* flex-grow, flex-shrink, flex-basis 的简写形式 */
}
8️⃣ 容器对齐（align-content）
align-content 用于控制多行内容在交叉轴方向的对齐方式。仅当内容换行时生效。
flex-start：将多行内容对齐到交叉轴的起点。flex-end：将多行内容对齐到交叉轴的终点。center：将多行内容对齐到交叉轴的中心。space-between：多行内容之间的间距相等。space-around：多行内容之间的间距相等，并且每行两侧有间距。stretch：多行内容被拉伸以填充容器。
.container {
display: flex;
flex-wrap: wrap; /* 多行内容 */
align-content: center; /* 多行内容垂直居中 */
}
示例：使用 Flexbox 实现一个简单的布局
HTML：
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
CSS：
.container {
display: flex;
justify-content: space-between; /* 子元素水平均匀分布 */
align-items: center; /* 子元素垂直居中对齐 */
flex-wrap: wrap; /* 允许换行 */
height: 300px; /* 设置容器的高度 */
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
效果说明：
.container使用了display: flex，使得其子元素.item在水平方向上均匀分布。- 每个
.item元素都将自己居中显示，同时允许在必要时换行。
总结
Flexbox 帮助我们更轻松地创建复杂且响应式的布局。通过合理地设置容器和元素的 flex 属性，可以快速实现自适应、对齐和间距调整。它特别适合在没有固定布局需求的情况下使用，能让布局更加灵活和直观。
发表回复