巧用CSS灵活布局：让两个div分道扬镳，独占一方！

2023-11-07 08:06:49

在网页设计中，有时需要两个<div>元素不在同一行显示，而是一个占据一行。这可以通过多种方式实现，其中最为常用的是Flexbox和Grid布局。

使用Flexbox布局

Flexbox是一种一维的布局模型，适用于处理容器中的项目排列问题，非常适合用来控制子元素独占一行的情况。

步骤：

设置父级<div>为flex容器。
通过调整align-items或justify-content属性来确保每个子项占据单独的一行。

示例代码：

<style>
.flex-container {
    display: flex;
    flex-direction: column; /* 确保项目垂直排列 */
}
.box {
    margin-bottom: 20px; /* 添加间距 */
    border: 1px solid #ccc; /* 可选，用于视觉区分 */
    padding: 20px;
    width: 100%; /* 满足独占一行的需求 */
}
</style>
<div class="flex-container">
    <div class="box">这是第一个盒子。</div>
    <div class="box">这是第二个盒子。</div>
</div>

原理：
设置display: flex;创建一个Flex容器。通过flex-direction: column;，使项目垂直排列，每个子元素自然会独占一行。

使用Grid布局

CSS Grid是一种二维的布局模型，允许开发者更灵活地控制行和列。使用Grid布局可以很容易实现让两个div占据不同的行。

步骤：

将父级设置为grid容器。
通过定义grid模板来确保每个子元素独占一行。

示例代码：

<style>
.grid-container {
    display: grid;
    grid-template-rows: repeat(2, auto); /* 定义两行，自动适应内容 */
}
.box {
    margin-bottom: 20px; /* 添加间距 */
    border: 1px solid #ccc; /* 可选，用于视觉区分 */
    padding: 20px;
    width: 100%; /* 满足独占一行的需求 */
}
</style>
<div class="grid-container">
    <div class="box">这是第一个盒子。</div>
    <div class="box">这是第二个盒子。</div>
</div>