0
<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 колонки в строке)

1 ответ 1

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>

6
  • Не подходит, нужна поддержка андроида 4
    – ruslik
    8 сен 2017 в 10:55
  • @ruslik тогда только на js
    – Cheg
    8 сен 2017 в 12:10
  • )))) вы серьезно? Это же flexbox
    – ruslik
    8 сен 2017 в 12:21
  • @ruslik следовательно, на flexbox можно все что угодно?
    – Cheg
    8 сен 2017 в 12:32
  • ну вроде задача то тривиальная. а Решения нормального нету.
    – ruslik
    8 сен 2017 в 13:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.