3

Есть контейнер который содержит элементы(Может быть любое количество).Главное чтоб элементы переносились.

В примере 1 это реализовано. Но хотелось бы применить свойства флекс и для блоков внутри контейнера. Т.Е. блоки внутри контейнера должны иметь одинаковый размер заполнять всю ширину и высоту контейнера при этом если количество блоков больше чем может поместиться в контейнер то нужно блоки переносить.

В примере 1 реализовано так :

/* Common Styles */
.content,
.content1,
.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div,
.content1 div,
.content2 div {
    height: 50%;
    width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
  <div class="red">4</div>
  <div class="green">5</div>
  <div class="blue">6</div>
</div>

Как можно увидеть из примера, размер блоков внутри контейнера установлен в пикселях и процентах;

Меня интересует можно ли обойтись лишь свойствами flex(но чтоб соблюдался перенос как на примере 1) ?

Пример 2. Как я пытался решить эту проблему

.content div,
.content1 div,
.content2 div {
   flex: 1;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
  <div class="red">4</div>
  <div class="green">5</div>
  <div class="blue">6</div>
</div>

Как видно из примера 2 блоки не переносятся. Как можно решит данную проблему?

2
  • А как по какому критерию должен flexbox понять, что надо переносить на новую строку? Если что попробуйте хотя бы min-width установить. 21 июн 2017 в 9:43
  • Вопрос ещё актуален? 22 июн 2017 в 6:55

2 ответа 2

3

Необходимо под каждое разрешение экрана отдельно задавать ширину блоку, который будет позиционироваться. Я сделал для моб версии и планшета, для декстоп сделано для 4 блоков. Для декстопа width: calc((100% - 20px) / 4); , если блоков по экрану будет 4..если будет больше, то делите на большее количество.

В "формуле" вычитается отсутп по бокам. То есть можете для себя понять какой вам отступ необходим. Ширина блока будет плавать в зависимости от ширины экрана.

.container {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.block {
  width: calc(100% - 20px);
  margin: 10px auto;
  background: black;
  height: 200px;
}

@media screen and (min-width: 768px) {
  .block {
    width: calc(50% - 30px);
  }
}

@media screen and (min-width: 1024px) {
  .block {
    width: calc((100% - 30px)/4);
  }
}
<div class="container">
  <div class="block">

  </div>

  <div class="block">

  </div>

  <div class="block">

  </div>

  <div class="block">

  </div>

  <div class="block">

  </div>

</div>

3

flex: 1; значит использовать всё свободное местo. Если хотите переносить строки, надо чтобы у блока была ширина. После этого flex-wrap: wrap; будет работать.

Ваш ответ

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

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