Как сделать гибкую сетку 2х3 с помощью flexbox - PullRequest
Новая
       19

Как сделать гибкую сетку 2х3 с помощью flexbox

1 голос
/ 18 апреля 2019

Я пытаюсь создать HTML-страницу, которая имеет 3 строки по 2 ячейки в каждой.Я хочу, чтобы все 6 ячеек одинаково заполняли всю страницу без необходимости указывать высоту, чтобы при изменении размера браузера происходило изменение ячеек.

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

.outer {
  display: flex;
  min-height: 100%;
}

.row {
  border: 1px solid blue;
  display: flex;
  flex: 1.0;
  flex-grow: 1.0;
}

.item {
  background-color: orange;
  flex: .5;
  flex-grow: 0.5;
  border: 1px solid red;
}
<div class="outer">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

1 Ответ

2 голосов
/ 18 апреля 2019

Сделать обертку outer флексбоксом столбца :

  • добавить flex: 1 к каждому row, чтобы строки разделяли вертикальное пространство,

  • добавьте flex: 1 к каждому item, чтобы столбцы разделяли горизонтальное пространство,

  • закончилось height: 100% на обоих body и html элементов (вы также можете использовать высота области просмотра для установки min-height) и установки значения по умолчанию body margin в ноль.

См.демо ниже: 

body, html {
  margin: 0;
  height: 100%;
}

.outer {
  display: flex;
  min-height: 100%;
  flex-direction: column; /* added */
}

.row {
  border: 1px solid blue;
  display: flex;
  flex: 1; /* added */
}

.item {
  background-color: orange;
  border: 1px solid red;
  flex: 1; /* added */
}
<div class="outer">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
...