Flexbox基础：列模式
Flexbox 的核心在于通过设置容器的 display 属性为 flex 或 inline-flex 来激活。 默认情况下，Flexbox 主轴是水平的，项目沿着主轴排列。 为了实现垂直对齐，我们需要将 Flexbox 的排列方向设置为垂直方向，也就是列模式。这可以通过设置 flex-direction: column;来实现。
实现垂直对齐
以下是一个示例，展示了如何使用Flexbox将按钮垂直对齐到文本下方：
<section>
<div class="container">
<h2> Bubbles </h2>
<button type="button" onclick="next()"> Next </button>
</div>
</section>对应的 CSS 样式如下：
.container {
display: flex;
flex-direction: column;
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
}
section {
width: 100%;
height: 100vh;
overflow: hidden;
background: #1F69FA;
display: flex;
justify-content: center;
align-items: center;
}
section h2 {
font-size: 10em;
color: #333;
margin: 0 auto;
text-align: center;
font-family: consolas;
}
section span {
margin-top: 700px;
font-size: 1em;
color: #333;
margin: 0 auto;
font-family: consolas;
background-color: #1F69FA;
border: none;
position: absolute;
}代码解释：
立即学习“前端免费学习笔记（深入）”；
- .container：
- display: flex;：激活 Flexbox 布局。
- flex-direction: column;：将 Flexbox 的排列方向设置为垂直方向，使项目按列排列。
- justify-content: center;：在垂直方向上将项目居中对齐。
- align-items: center;：在水平方向上将项目居中对齐。
- section：
- 设置了背景颜色，高度和宽度，以及使用了flex布局，使其内部元素居中。
- section h2：
- 设置了文本的样式，包括字体大小，颜色和字体。
- section span：
- 设置了span标签的样式，包括外边距，字体大小，颜色，背景颜色，边框和定位。
注意事项：
- 确保容器具有明确的高度，以便 justify-content 能够正确地进行垂直居中。
- align-items 属性控制项目在交叉轴上的对齐方式。 在 flex-direction: column; 的情况下，交叉轴是水平方向。
总结
通过将容器设置为 Flexbox 列模式，并利用 justify-content: center; 和 align-items: center; 属性，我们可以轻松地将按钮垂直对齐到文本下方。 Flexbox 提供了强大的布局能力，能够帮助开发者更有效地控制页面元素的排列方式，从而创建更具吸引力和用户友好的网页。
