html+css: выравнивание div-блоков

IT

Веб-мастеринг

html+css: выравнивание div-блоков

18.07.24

✎

15:16

Подскажите если кто-то шарит, нужно чтобы блоки переносились как на 1м скриншоте, но почему-то после уменьшения меньше 800px div'ы начинают уменьшаться, а не переноситься

1 Волшебник

18.07.24

✎

15:15

покажите исходники

18.07.24

✎

15:17

(1)

3 Волшебник

18.07.24

✎

15:18

(2) вам лениво скопировать текстом? ну ок

18.07.24

✎

15:38

<!doctype html>
<html lang="ru">

<head>
    <style>
        body {
            display: flex;
            flex-wrap: wrap;
        }

        .privet {
            margin: 3px;
            display: flex;
            height: auto;
            width: auto;
            padding: 13px;
            background-color: green;
            border-radius: 47px;
        }

        .asda {
            display: flex;
            flex-wrap: wrap;
            height: 50px;
            width: auto;
        }
    </style>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="asdasdasdas">
        <h2>asdasd</h2>
        <div class="asda">
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>

        </div>
    </div>

</body>

</html>

18.07.24

✎

15:38

не лениво, просто подумал не для копирования вам а для просмотра (3)

18.07.24

✎

15:48

(0), <!doctype html>
<html lang="ru">

<head>
    <style>
        body {
            display: flex;
            flex-direction: column;
        }

        .privet {
            margin: 3px;
            padding: 13px;
            background-color: green;
            border-radius: 47px;
        }

        .asda {
            display: flex;
            flex-wrap: wrap;
        }
    </style>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="asdasdasdas">
        <h2>asdasd</h2>
        <div class="asda">
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
        </div>
    </div>

</body>

</html>

18.07.24

✎

15:49

При переносе нужно, чтобы кнопка переносилась с середины или с начала поля?

18.07.24

✎

15:52

если с середины вот:

<!doctype html>
<html lang="ru">

<head>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .privet {
            margin: 3px;
            padding: 13px;
            background-color: green;
            border-radius: 47px;
        }

        .asda {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
        }
    </style>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="asdasdasdas">
        <h2>asdasd</h2>
        <div class="asda">
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
            <div class="privet">команда 1</div>
        </div>
    </div>

</body>

</html>

18.07.24

✎

16:10

Это не то
Вот про что я -
https://youtu.be/N0d9jtojkgk

После какого-то значения элементы не переносятся на новую строку а уменьшаются в размере своем

18.07.24

✎

16:26

up

18.07.24

✎

16:48

up

18.07.24

✎

17:39

для публикации исходников есть https://codepen.io/trending

18.07.24

✎

17:41

но кажется, что просто не хватает <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"> или с другими нужными параметрами (см https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag )

18.07.24

✎

18:00

(13) Спасибо огромное)

19.07.24

✎

00:39

(14) И использовать абсолютные значения в пикселях это совсем не очень практика

19.07.24

✎

00:40

(14) Откройте для себя tailwindcss

19.07.24

✎

10:36

(16) тэилвайнд штука прям хорошая, но надо её начинать использовать когда знаешь, что делаешь.
да и установки мета тегов в ней нет, так что поведение из (0) оно бы не исправило.