Flexbox или CSS Grid: как сделать так, чтобы один столбец был больше двух других? - PullRequest
Новая
       81

Flexbox или CSS Grid: как сделать так, чтобы один столбец был больше двух других?

0 голосов
/ 13 июля 2020

Как бы вы решили этот макет, если бы у вас всего 3 контейнера: 

<div class="main-container">
 <div class="blue-container"></div>
 <div class="red-container"></div>
 <div class="green-container"></div>
</div>

.main-container {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: stretch;
 align-content: stretch;
}

.blue-container, .red-container {
 width: 50%;
}  

.green-container {
 flex-basis: 100%;
 width: 100%;
}

Я решил это для настольных компьютеров (код выше) и мобильных устройств (все гибкие основы: 100%). Но как решить макет планшета без добавления разметки / <div>?

пример трехколоночной компоновки

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Сеточное решение. Посмотрите, какой он компактный и красивый. Для всех условий дерева. Используется grid-template-sizes . Попробуйте изменить размер области просмотра. 

.main-container {
  display: grid;
  grid-template-areas:
    "blue red"
    "green green";
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto; 
  grid-gap: 10px;
  min-height: 150px; /*just for instance */
}

.blue-container {
  grid-area: blue;
  background: blue;
}

.red-container {
  grid-area: red;
  background: red;
}  

.green-container {
  grid-area: green;
  background: green;
}

/* tablet */
@media (max-width: 991.98px) {
  .main-container {
    grid-template-areas:
      "blue red"
      "green red";
  }
}

/* mobile */
@media (max-width: 575.98px) {
  .main-container {
    grid-template-areas:
      "blue blue"
      "red red"
      "green green";
  }
}
<div class="main-container">
 <div class="blue-container"></div>
 <div class="red-container"></div>
 <div class="green-container"></div>
</div>
1 голос
/ 13 июля 2020

Измените flex-direction на столбец и используйте свойство order. Flex-basis определит высоту: 

.main-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  height: 100vh;
}

.red-container {
  flex-basis: 100%;
  background: red;
  order: 3;
}

.green-container {
  background: green;
  order: 2;
  flex-basis: 25%;
}

.blue-container {
  background: blue;
  order: 1;
  flex-basis: 75%;
}
<div class="main-container">
  <div class="blue-container"></div>
  <div class="red-container"></div>
  <div class="green-container"></div>
</div>
...