CSS Flexbox 实现垂直布局的技巧和代码分享
在前端开发中，实现垂直布局是一个比较常见的需求。通过 CSS 的 Flexbox 布局方式，我们可以很轻易地实现垂直布局。在本篇文章中，我们将深入讲解 CSS Flexbox 实现垂直布局的技巧和代码分享。
CSS Flexbox 是一种基于流式布局的 CSS 布局模型，它可以使容器内的子元素自适应屏幕尺寸和设备大小，并通过一系列属性调整子元素的大小、位置和排序。 与传统的布局方式相比，它具有更加灵活的布局方式，更容易实现垂直布局。
- 父容器设置 display: flex
销售单个厕纸，赚取的利润不一定比销售一个房子低。
布局前，我们需要将父容器的 display 属性设置为 flex：
.container {
display: flex;
flex-direction: column;
}这段代码可以将容器中所有的子元素都纵向排列。设置 flex-direction 属性后， items 默认值为 stretch，即让子元素在 cross axis 上拉伸填满整个容器。请注意，容器和子元素的宽度和长度默认被设置为 0。我们需要使用其他属性来收缩或扩展它们。
- 使用 justify-content 和 align-items
我们可以使用 justify-content 和 align-items 属性来控制主轴和交叉轴上的对齐方式。例如，我们将 justify-content 属性设置为 center，可以水平居中容器中的所有子元素：
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}此代码可以将容器中的子元素垂直居中并水平居中。
- 设置子元素的 margin
我们还可以通过设置子元素的 margin 属性来调整子元素之间的垂直空间。例如，如果我们在子元素中设置了 margin-bottom 属性，则可以增加子元素之间的垂直间距：
.item {
margin-bottom: 10px;
}- 控制子元素高度和宽度
我们还可以通过设置子元素的高度和宽度来控制子元素之间的垂直间距。例如，如果我们想要将第一个子元素的高度设置为 100px，可以将其设置为以下 CSS 样式：
.item:first-child {
height: 100px;
}- 在父元素中添加 flex 属性
我们还可以通过在父元素中添加 flex 属性来控制子元素的大小。例如，如果我们希望第一个子元素在 Y 轴方向上要比其他子元素更高，则可以设置其在主轴方向的 flex 属性：
.item:first-child {
flex: 2;
}在这个示例中，我们通过给第一个子元素添加了 2 的 flex 值，从而将它拉伸，使它具有更高的高度。
这些方法可以帮助我们更好地控制 Flexbox 布局中子元素的大小和位置，并实现更专业和美观的页面布局。
示例代码：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- - ----- - -------------- ----- ------ ----- ------- ----- ----------------- ----- - ----------------- - ------- ------ ----- -- -
总结
本文介绍了使用 CSS Flexbox 实现垂直布局的技巧和代码分享。通过将容器的 display 属性设置为 flex，我们可以轻易地控制子元素的位置和大小，并使用 justify-content 和 align-items 属性来控制子元素在主轴和交叉轴上的对齐方式。通过设置子元素的 margin、高度和宽度以及在父元素中添加 flex 属性，我们可以更加精细地调整子元素之间的垂直空间。如果您还没有尝试 Flexbox 布局，那么现在是学习的时候了。它将使您的页面布局更加简洁、优雅和适应性强。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3c94f48841e989402eb06