HTML中使用Flex布局实现双行夹批效果

lichongyang

2 周前

在 HTML 中使用 Flexbox 布局实现“双行夹批效果”通常指的是在容器中排列两个元素，且这两个元素在视觉上表现为两行互相包围或夹住的效果。通常来说，这类效果可能是上面一行元素居中，下面一行元素也居中，两者有一些间距，形成“夹批”的效果。

我们可以通过使用 Flexbox 来轻松实现这个布局。以下是一个简单的实现方式：

示例代码：

HTML:

&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;title>Flex 布局 双行夹批效果&lt;/title>
    &lt;link rel="stylesheet" href="styles.css">
&lt;/head>
&lt;body>

    &lt;div class="container">
        &lt;div class="top-row">
            &lt;div class="item">上行1&lt;/div>
            &lt;div class="item">上行2&lt;/div>
            &lt;div class="item">上行3&lt;/div>
        &lt;/div>
        &lt;div class="bottom-row">
            &lt;div class="item">下行1&lt;/div>
            &lt;div class="item">下行2&lt;/div>
            &lt;div class="item">下行3&lt;/div>
        &lt;/div>
    &lt;/div>

&lt;/body>
&lt;/html>

CSS (styles.css):

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px; /* 上下两行之间的间距 */
}

.top-row, .bottom-row {
    display: flex;
    justify-content: center; /* 水平居中 */
    gap: 15px; /* 每个元素之间的间距 */
}

.item {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
}

解释：

Flexbox 布局：
- .container 使用 flex-direction: column; 将子元素垂直排列。这使得 .top-row 和 .bottom-row 在垂直方向上堆叠。
- 使用 gap 属性来为上下两行之间设置间距。
上下两行（.top-row 和 .bottom-row）：
- 每一行都使用 display: flex; 使其子元素水平排列。
- justify-content: center; 确保每行中的元素水平居中。
- gap 用于设置行内元素之间的间距。
每个元素（.item）：
- 每个 .item 使用背景颜色、内边距、圆角和字体大小进行样式化。
- border-radius: 5px; 让每个元素的角落变得圆润。

效果：

上面一行 (.top-row) 和下面一行 (.bottom-row) 都是水平居中的，并且每行之间有一定的间距。
上下两行被居中显示在页面上，并且每行的元素之间和上下两行之间都保持一定的间隔。

这个布局非常适合需要两个行元素视觉上被“夹住”的效果，且使用了 Flexbox 使得布局在不同屏幕尺寸下非常灵活。