时间戳

首页 > 解决方案 > 使用 Display Flex 保持方向

html - 使用 Display Flex 保持方向

问题描述

目前，当我以 100% 的比例时，我有这个网格布局。

布局

当我达到 150% 的比例时，我将其作为我的布局：

在此处输入图像描述

但是，当我达到 150% 的比例时，这是我想要的理想布局：

在此处输入图像描述

下面是我的代码：


<html>

<head>
    <script type="text/javascript"> </script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<style>
    * {
        font-family: sans-serif;
        font-size: 1.4em;   
    }

    .container {
        height: 400px;

    }

    .row {
        display: flex;
        padding: 0;
        margin: 0;
    }

    .box {
        display: flex;
        flex-direction: row;
        width: 200px;   
        height: 100px;
        margin: 1px;
        padding: 10px;
        background-color: purple;
        color: white;
    }

    </style>

    <section class="container">
        <div class="row">
            <div class="box box1">One</div>
            <div class="box box2">Two</div>
            <div class="box box3">Three</div>
            <div class="box box4">Four</div>
            <div class="box box5">Five</div>
        </div>

        <div class="row">
            <div class="box box6">Six</div>
            <div class="box box7">Seven</div>
            <div class="box box8">Eight</div>
            <div class="box box9">Nine</div>
            <div class="box box10">Ten</div>
        <div class="row"></div>
        </section>


</body>
</html>

我不确定我需要更改什么才能获得我想要的布局。我正在为此使用display: flex

标签： htmlcssbootstrap-4

解决方案

只需在您的 css 中的 em 中使用媒体查询：

.box {
    flex-wrap: wrap;
}
@media (max-width: 75em) {
    .box {
        flex-basis: 20%;
    }
}

@media (min-width: 76em) {
    .box {
        flex-basis: 25%;
    }
}

资源

推荐阅读