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 установить. Commented 21 июн. 2017 в 9:43
  • Вопрос ещё актуален? Commented 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; будет работать.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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