Flexbox колонки с одинаковыми отступами

338

09 сентября 2017, 23:41

<div class="wrapper">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div

СSS

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.col {
  width: 50%;
  height: 100px;
  border: 1px solid red;
}
.col:nth-child(2n) {
  margin-left: 20px
}

Когда не указываешь flex-wrap, то браузер подстраивает ширину элементов и задает им фиксированные отступы. Мне нужно такое же поведение с flex-wrap Чтобы колонки тянулись, при этом у них был фиксированный отступ, при этом они еще и переносились правильно(2 колонки в строке)

Answer 1

Для установки ширины колонки используйте функцию calc():

* { 
  box-sizing: border-box; 
} 
 
.wrapper { 
  display: flex; 
  flex-wrap: wrap; 
} 
 
.col { 
  width: calc((100% - 20px) / 2); 
  height: 100px; 
  border: 1px solid red; 
} 
 
.col:nth-child(2n) { 
  margin-left: 20px 
}

<div class="wrapper"> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
</div>

Поддержку браузерами можно увидеть на caniuse.

UPDATE с учетом комментария про calc().

Несколько костыльный получился вариант, но работает так, как вам и нужно:

* { 
  box-sizing: border-box; 
} 
 
.wrapper { 
  display: flex; 
  flex-wrap: wrap; 
  padding: 0 10px; 
} 
 
.col { 
  width: 50%; 
  height: 100px; 
  border: 1px solid red; 
  margin: 0 10px; 
} 
 
.col:nth-child(2n-1) { 
  margin-left: -10px; 
} 
 
.col:nth-child(2n) { 
  margin-right: -10px; 
}

<div class="wrapper"> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
  <div class="col"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как доставать данные из html с помощью javascript?

В body имеется

325

HTML

Применить стили th c colspan к td

У меня есть таблица, в которой th отмечен colspan, где границы th отмечены черной линией, мне бы хотелось чтобы эти границы также отмечались и у td, first и last не подходят,...

288

HTML

Функция не срабатывает динамически

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

270

HTML

Исчезающий блок при hover

На http://wwwlesha

313