Создание сетки flexbox с желобами и фиксированной шириной

Question

Мне нужно создать сетку, которая имеет 3 строки , каждая строка имеет 2 столбца .

• Столбцы первой строки должны составлять 40% - 60%
• Во второй строке оба столбца должны составлять 50%
• Первый столбец третьей строки должен составлять 60%, второй столбец40%.

Между столбцами должен быть 10px желоб между столбцами, а для экранов меньшего размера, чем 992px все столбцы должны иметь 100%, в то же время оставляя 10px "желоб".

( Под каждым 100% столбцом, кроме последнего, должно быть 10px желоба ).Я изо всех сил пытаюсь сделать это наилучшим образом.

HTML:

<div class="flexrow">
   <div class="col-1"></div>
   <div class="col-2"></div>
   <div class="col-3"></div>
   <div class="col-4"></div>
   <div class="col-5"></div>
   <div class="col-6"></div>
</div>

CSS:

.flexrow{
   display: flex;
   align-items:stretch;
   flex-wrap: wrap;
}

Я пробовал поля, но не могу заставить его работать должным образом.

Answer 1

По разным причинам эта работа лучше подходит для CSS Grid, чем Flexbox.

Во-первых, заставить работать желоба в Grid просто. Вы можете использовать свойство grid-gap, которое пока недоступно во flexbox.

Во-вторых, запрашиваемые вами «столбцы» на самом деле не являются столбцами. Столбец имеет одинаковую ширину сверху вниз. Вы запрашиваете макет кладки , который позволяет элементам содержимого распределяться по нескольким столбцам и строкам.

Опять же, эту задачу гораздо проще выполнить с помощью CSS Grid.

Вот одно решение, которое может работать для вас (включая медиа-запрос):

jsFiddle demo

.grid-container {
  display: grid;
  grid-auto-columns: 1fr;
  width: 500px;
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

.col-1 {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.col-2 {
  grid-column: 5 / span 6;
  grid-row: 1;
}

.col-3 {
  grid-column: 1 / span 5;
  grid-row: 2;
}

.col-4 {
  grid-column: 6 / span 5;
  grid-row: 2;
}

.col-5 {
  grid-column: 1 / span 6;
  grid-row: 3;
}

.col-6 {
  grid-column: 7 / span 4;
  grid-row: 3;
}

@media ( max-width: 992px ) {
  .grid-container>div {
    grid-column: 1;
    grid-row: auto;
  }
}

/* non-essential demo styles */

.grid-container {
  border: 1px solid black;
  background-color: lightgray;
}
.grid-container > div {
  font-size: 1.3em;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-container > div:nth-child(odd) {
  background-color: green;
}
.grid-container > div:nth-child(even) {
  background-color: orangered;
}

<div class="grid-container">
  <div class="col-1">40%</div>
  <div class="col-2">60%</div>
  <div class="col-3">50%</div>
  <div class="col-4">50%</div>
  <div class="col-5">60%</div>
  <div class="col-6">40%</div>
</div>

В приведенном выше макете каждый создаваемый вами столбец имеет ширину 1fr. Это означает, что каждый столбец занимает равное распределение свободного пространства в контейнере.

Теперь вы можете охватывать столбцы для создания областей сетки с желаемой шириной.

Например, если вы хотите, чтобы «столбец» имел ширину 60%, скажите элементу сетки, чтобы он охватывал шесть столбцов (span 6).

Еще одним преимуществом 1fr является то, что он применяется после того, как все фиксированные ширины (например, желоба) учтены в длине строки. Это означает, что вам не нужно делать какие-либо расчеты для размещения десяти столбцов.

Answer 2

Flexbox делает это довольно легко с justify-content значением space-between:

.flexrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

Это гарантирует, что элементы будут прилипать к внешнему краю контейнера, когда размеры будут правильными.

Желоб создается путем установки ширины гибких элементов менее 100% от общей ширины. Здесь мы хотим 2 столбца, чтобы вы могли установить ширину элементов на 50% минус достаточно, чтобы составить ширину желоба:

.flexcol {
  width: calc(50% - 5px); // 50% minus 5px for each column, with 2 columns that's a 10px gutter space between the two columns.
  margin-bottom: 10px; //space between the rows, remove if you dont want that.
}

Теперь, чтобы установить первую и третью строки, просто измените ширину соответственно:

.col-1,
.col-6 {
  width: calc(40% - 5px); // here's the 40% ones
}

.col-2,
.col-5 {
  width: calc(60% - 5px); // and the 60% ones
}

Чтобы изменить 100% на 992 пикселя, просто добавьте медиа запрос и обновите необходимые значения:

@media (max-width: 992px) {
  .flexcol {
    width: 100%; // 100% width, no margin or anything to deal with because of the space-between layout approach
  }
  .col-5 {
    margin-bottom: 10px; // add this so the 5th and 6th items have space between them when 100% wide
  }
}

.flexrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #efefef;
}

.flexcol {
  width: calc(50% - 5px);
  margin-bottom: 10px;
  
  /* just for visibility */
  border: 1px solid red;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
}

.col-1,
.col-6 {
  width: calc(40% - 5px);
}

.col-2,
.col-5 {
  width: calc(60% - 5px);
}

.col-5,
.col-6 {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .flexcol {
    width: 100%;
  }
  .col-5 {
    margin-bottom: 10px;
  }
}

<div class="flexrow">
  <div class="flexcol col-1">THING 1</div>
  <div class="flexcol col-2">THING 2</div>
  <div class="flexcol col-3">THING 3</div>
  <div class="flexcol col-4">THING 4</div>
  <div class="flexcol col-5">THING 5</div>
  <div class="flexcol col-6">THING 6</div>
</div>

Answer 3

Я бы просто сделал это с flexbox (https://yoksel.github.io/flex-cheatsheet/) и некоторыми полями, так как я думаю, что нет "идеального" или предпочтительного способа сделать это.

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

/*




I need to create a grid that has 3 rows, each row has 2 columns.

    First row columns should be 40% - 60%
    Second row both columns should be 50%
    Third row first column should be 60%, second column 40%.

The columns should have a 10px gutter in between the columns, and for screen sizes smaller then 992px all columns should be 100% while still having a 10px "gutter".

(Underneath every 100% column except the last one should be 10px gutter). I am struggling on how to do this the best way.

*/

.row {
  display: flex;
  flex-flow: row nowrap;
  background-color: white;
  height: 100px;
}

.item1 {
  flex-basis: 40%;
  margin-right: 5px;
  background-color: red;
}

.item2 {
  flex-basis: 60%;
  margin-left: 5px;
  background-color: yellow;
}

.item3 {
  margin-right: 5px;
  flex-basis: 50%;
  background-color: blue;
}

.item4 {
  margin-left: 5px;
  flex-basis: 50%;
  background-color: pink;
}

.item5 {
  margin-right: 5px;
  flex-basis: 60%;
  background-color: grey;
}

.item6 {
  margin-left: 5px;
  flex-basis: 40%;
  background-color: brown;
}

@media(max-width: 992px) {
  .row {
    display: flex;
    flex-flow: row wrap;
    background-color: white;
    height: 100px;
  }
  .item1 {
    flex-basis: 100%;
    margin-right: 0px;
    background-color: red;
        margin-bottom: 10px;
  }
  .item2 {
    flex-basis: 100%;
    margin-left: 0px;
    background-color: yellow;
        margin-bottom: 10px;
  }
  .item3 {
    margin-right: 0px;
    flex-basis: 100%;
    background-color: blue;
        margin-bottom: 10px;
  }
  .item4 {
    margin-left: 0px;
    flex-basis: 100%;
    background-color: pink;
        margin-bottom: 10px;
  }
  .item5 {
    margin-right: 0px;
    flex-basis: 100%;
    background-color: grey;
        margin-bottom: 10px;
  }
  .item6 {
    margin-left: 0px;
    flex-basis: 100%;
    background-color: brown;
  }
}

<div class="row">
  <div class="item1"></div>
  <div class="item2"></div>
</div>
<div class="row">
  <div class="item3"></div>
  <div class="item4"></div>
</div>
<div class="row">
  <div class="item5"></div>
  <div class="item6"></div>
</div>