Как обернуть, используя flexbox и медиа-запросы? - PullRequest
Новая
       20

Как обернуть, используя flexbox и медиа-запросы?

0 голосов
/ 15 мая 2019

У меня есть контейнер с четырьмя ящиками. Контейнер все вместе должен быть шириной окна.

Выше 720px должен быть один ряд из четырех блоков. Ниже 720px должно быть два ряда из двух блоков. Ниже 600px должно быть четыре ряда одного блока.

Я запутался, что мне следует указывать в медиазапросах. 

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  border: 1px solid black;
  display: flex;
  height: 100%;
  width: 100%;
}

.column {
  border: 1px solid red;
  flex: 1;
}

@media (max-width: 720px) {
  .container {
    ?
  }
}

@media (max-width: 600px) {
  .container {
    ?
  }
}
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Ответы [ 2 ]

1 голос
/ 15 мая 2019

Установите гибкие элементы для переноса на ваших точках останова.

Вот демоверсия скрипки . 

.container {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

.column {
  flex: 1;
  border: 1px solid black;
  background-color: lightgray;
}

@media (max-width: 720px) {
  .column {
    flex-basis: 34%;
    background-color: orange;
  }
}

@media (max-width: 600px) {
  .column {
    flex-basis: 51%;
    background-color: lightgreen;
  }
}

body {
  margin: 0;
}
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Обратите внимание, что с flex-grow: 1, определенным в сокращении flex, нет необходимости в том, чтобы flex-basis был точным (25%, 50%, 100%), что может привести к неравному переносу, если вы добавите маржу пространство.

Поскольку flex-grow будет занимать свободное место в строке, flex-basis должно быть достаточно большим, чтобы обеспечить перенос. Это обеспечит достаточно места для полей, но не хватит места для дополнительного предмета.

0 голосов
/ 15 мая 2019

Вы можете использовать сетки для достижения этой цели. Если вы назовете их так, как я сделал во фрагменте, последовательность столбцов будет легко изменить. 

.container {
      display: grid;
      grid-auto-rows: 200px;
      grid-auto-columns: auto;
      grid-template-areas:
      "column1 column2 column3 column4";
      border: 1px solid black;
      width: 100%;
      height: 100%;
    }

    .column {
      display: flex;
    }
    
    .column1 {
      grid-area: column1;
      background-color: red;
    }
    
    .column2 {
      grid-area: column2;
      background-color: yellow;
    }
    
    .column3 {
      grid-area: column3;
      background-color: green;
    }
    
    .column4 {
      grid-area: column4;
      background-color: blue;
    }

    @media (max-width: 720px) {
      .container {
        grid-template-areas:
        "column1 column2"
        "column3 column4";
      }
    }

    @media (max-width: 600px) {
      .container {
        grid-template-areas:
        "column1"
        "column2"
        "column3"
        "column4";
      }
    }
<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="main.css">
    </head>
    <body>
      <div class="container">
        <div class="column column1"></div>
        <div class="column column2"></div>
        <div class="column column3"></div>
        <div class="column column4"></div>
      </div>
    </body>
    </html>

Подробнее о сетках в CSS здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...