Адаптивный гибкий макет с автоматически заполненным вертикальным зазором? - PullRequest
Новая
       15

Адаптивный гибкий макет с автоматически заполненным вертикальным зазором?

0 голосов
/ 15 января 2019

Извините, я даже не знаю, как описать мои вопросы с правильными терминами для названия, или не знаю, глуп ли этот вопрос. Но вот моя проблема: у меня есть несколько сеток, таких как блоки 1x1, 2x1, 2x2 и 1x2, они могут появляться в произвольном порядке без определенного порядка, и я хочу, чтобы эти сетки располагались на моей странице. Что у меня есть: 

<html>
    <style>
        .container
        {
            display:flex;
            flex-direction:row;
            flex-wrap: wrap;
        }
        .b11
        {
            background-color:#1b6d85;
            width:100px;
            height:100px;
            border: 1px solid #fff;
        }
        .b21
        {
            background-color:#8a6d3b;
            width:200px;
            height:100px;
            border: 1px solid #fff;
        }
        .b22
        {
            background-color:#2aabd2;
            width:200px;
            height:200px;
            border: 1px solid #fff;
        }
    </style>
    <body>
        <div class="container">
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b22"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
        </div>
    </body>
</html>

И результат (при произвольной ширине экрана, например, 760 пикселей): enter image description here

Поскольку среди предметов есть поле 2х2, оно оставляет зазор для всего ряда. Есть ли способ, как эти ящики можно расположить как можно плотнее (например, сложив их вместе слева направо, снизу) без пропусков в рядах?

enter image description here

1 Ответ

0 голосов
/ 15 января 2019

Я попробовал ваш код, и у меня есть решение. Вам нужно использовать flex: 1; для всех ваших предметов будет выравнивание. Например: 

.container
        {
            display:flex;
            flex-direction:row;
            flex-wrap: wrap;
        }
        .container > * {
            flex: 1;
        }
        .b11
        {
            background-color:#1b6d85;
            width:100px;
            height:100px;
            border: 1px solid #fff;
        }
        .container .b21 {
            flex: 2;
        }
        .b21
        {
            background-color:#8a6d3b;
            width:200px;
            height:100px;
            border: 1px solid #fff;
        }
        .b22
        {
            background-color:#2aabd2;
            width:200px;
            height:200px;
            border: 1px solid #fff;
        }
<html>
<head></head>
    <body>
        <div class="container">
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b22"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
            <div class="b11"></div>
            <div class="b21"></div>
        </div>
    </body>
</html>

Вы можете попробовать это.

...