Действительно отзывчивый столбец контента с боковой панелью без медиазапросов - PullRequest
Новая
       25

Действительно отзывчивый столбец контента с боковой панелью без медиазапросов

1 голос
/ 22 января 2020

Я пытаюсь создать адаптивный макет основы c с блоком контента (который имеет 3 столбца) и боковой панелью. Текущая проблема, с которой я столкнулся, - это определение поля, когда боковая панель находится справа, а боковая панель - под сеткой. В настоящее время у меня нет поля, но я хотел бы иметь запас в 20px (например), когда боковая панель находится справа, и 50px, когда боковая панель находится под сеткой (или 20px, поэтому она такая же). Также .sidebar должно быть полной шириной, когда на новой строке. Вот мой код: 

    <!DOCTYPE html>
<html>
    <head>
        <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;">
    </head>
    <body>
        <style>
            .main {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                background: yellow;
            }
            .main .six-col {
                flex: 1 1 auto;
                display: grid;
                justify-content: space-between;
                column-gap: 15px;
                background: red;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
            .main .six-col .col { border: 1px white solid;}
            .main .sidebar {
                flex: 0 0 250px;
                background: green;
            }
        </style>
        <div class="main">
            <div class="six-col">
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
            </div>
            <div class="sidebar">
                sidebar
            </div>
        </div>
    </body>
</html>

Можно ли этого достичь без медиазапросов?

1 Ответ

1 голос
/ 23 января 2020

Вы можете сделать следующее:

  • Добавить отрицательные поля в контейнер .main и положительные поля для детей следующим образом: 
.main {
    /* ... other stuff ... */
    margin-top: -20px;
    margin-left: -20px;
}
.main > * {
    margin-top: 10px;
    margin-left: 10px;
}

Это будет дает вам запас, когда ваш .sidebar еще не обернут и когда .sidebar обернут.

  • Кроме того, вы можете добавить атрибут flexbox, чтобы обернутый .sidebar растягивался по всей ширине родитель: 
.main .sidebar {
    /* ... other stuff ... */
    flex-grow: 1;
}

Таким образом, в общей сложности у вас будет следующее: 

<!DOCTYPE html>
<html>
    <head>
        <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;">
    </head>
    <body>
        <style>
            .main {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                background: yellow;
                /* for spacing between sidebar and the six columns container */
                margin-top: -20px;
                margin-left: -20px;
            }
            .main > * {
                /* for spacing between sidebar and the six columns container */
                margin-top: 10px;
                margin-left: 10px;
            }
            .main .six-col {
                flex: 1 1 auto;
                display: grid;
                justify-content: space-between;
                column-gap: 15px;
                background: red;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
            .main .six-col .col { border: 1px white solid;}
            .main .sidebar {
                flex: 0 0 250px;
                /* for stretching the wrapped sidebar */
                flex-grow: 1;
                background: green;
            }
        </style>
        <div class="main">
            <div class="six-col">
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
            </div>
            <div class="sidebar">
                sidebar
            </div>
        </div>
    </body>
</html>

Edit 1

Я нашел более чистое и простое решение, используя gap свойство «многостолбцовое, гибкое и сеточное размещение» (см .: https://www.w3.org/TR/css-align-3/#gaps): 

<!DOCTYPE html>
<html>
    <head>
        <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;">
    </head>
    <body>
        <style>
            .super-main {
                margin: auto;
                max-width: 1200px;
                padding: 50px;
                background-color: #FFD700;
            }
            .main {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                background: yellow;
                row-gap: 15px;
                column-gap: 15px;
            }
            .main .six-col {
                flex-grow: 3;
                display: grid;
                justify-content: space-between;
                column-gap: 15px;
                background: red;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
            .main .six-col .col {
                border: 1px white solid;
            }
            .main .sidebar {
                flex-basis: 250px;
                flex-shrink: 1;
                /* for stretching the wrapped sidebar */
                flex-grow: 1;
                background: green;
            }
        </style>
        <div class="super-main">
            <div class="main">
                <div class="six-col">
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                    <div class="col">asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad </div>
                </div>
                <div class="sidebar">
                    sidebar
                </div>
            </div>
        </div>
    </body>
</html>
...