了解 CSS 中 display: flex 弹性盒子布局结合 flex-wrap 的应用

功能描述

display: flex 将元素设置为弹性盒子布局模式，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。因此，子元素的 float、clear 和 vertical-align 属性也将失效。
默认情况下，flex 布局项目都排在一条线上。flex-wrap 属性定义一条轴线轴线排不下时如何换行。

代码示例

示例的 html 文件：

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            background-color: green;
            /* 设置样式 */
        }

        .flex-container div {
            background-color: #f1f1f1;
            width: 320px;
            height: 320px;
            margin: 10px;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>

</body>

</html>

image0

1. display: flex 设置弹性盒子布局

.flex-container {
    background-color: green;
    /* 设置样式 */
    display: flex;
}

image1

2. flex-wrap: nowrap 设置不换行

.flex-container {
    background-color: green;
    /* 设置样式 */
    display: flex;
    flex-wrap: nowrap;
}

image2

3. flex-wrap: wrap 设置顺序换行

.flex-container {
    background-color: green;
    /* 设置样式 */
    display: flex;
    flex-wrap: wrap;
}

image3

4. flex-wrap: wrap-reverse 设置倒序换行

.flex-container {
    background-color: green;
    /* 设置样式 */
    display: flex;
    flex-wrap: wrap-reverse;
}

image4

扩展：gap 设置网络间距

假如不使用 margin 设置布局项目的间距，可以在布局盒子中使用 gap 设置布局项目的行与列之间的间隙

.flex-container {
    background-color: green;
    /* 设置样式 */
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 20px;
}

.flex-container div {
    background-color: #f1f1f1;
    width: 320px;
    height: 320px;
    /* margin: 10px; */
    text-align: center;
    font-size: 30px;
}

image5

参考文档

Flex 布局教程：语法篇 - 阮一峰的网络日志
CSS Flexbox - w3school 在线教程
CSS flex-wrap 属性 - w3school 在线教程

posted @ 2024-12-17 15:51  意气风发胡小图  阅读(103)  评论(0)  编辑  收藏  举报