Как начать новую строку с определенного элемента с Flexbox?

Question

Это очень простое упражнение, но я не могу найти изящный способ его решения (только начал изучать HTML и CSS).

Мне нужен 5-й блок («bloque 5») красного цвета, чтобы быть под остальными четырьмя с помощью Flexbox. Результат должен быть:

Может ли кто-нибудь помочь мне с этим, пожалуйста? Это то, что я до сих пор:

div {
  margin: 5px;
  border: 1px solid pink;
  padding: 5px;
  font-family: arial, sans-serif;
  font-size: 14px;
}

.contenidor {
  width: 760px;
  display: flex;
}

div[class*=element] {
  width: 100%;
  padding: 2px 30px 5px 2px;
}

.element5 {
  background-color: red;
}

<div class="contenidor">
  <div class="element1">bloque 1</div>
  <div class="element2">bloque 2</div>
  <div class="element3">bloque 3</div>
  <div class="element4">bloque 4</div>
  <div class="element5">bloque 5</div>
</div>

Answer 1

Суть из n элементов в строке с flexbox заключается в том, что отступ и margin также должны учитываться, поскольку вы упаковка flexbox. Я внес следующие изменения в ваш код:

• для упаковки flexbox, вам нужно указать flex-wrap: wrap для контейнера flexbox ,

• чтобы получить 4 элемента в строке, вы можете использовать flex-basis как 25% и скорректировать маржу, используя calc,

• чтобы получить строки с менее чем 4 элементами заполнить доступное пространство , вы можете рассмотреть flex-grow: 1 для flex элементов тоже *, 1033 *

• также рассмотрите возможность добавления box-sizing: border-box к element*, чтобы отступ был включен в width (и, следовательно, в flex-basis)

Подобный вопрос вы можете найти здесь: arranging 5 items in a row. Смотри демо ниже:

div {
  margin: 5px;
  border: 1px solid pink;
  padding: 5px;
  font-family: arial, sans-serif;
  font-size: 14px;
}

.contenidor {
  width: 760px;
  display: flex;
  flex-wrap: wrap; /* wrapping flexbox */
}

div[class*=element] {
  /*width: 100%;*/
  padding: 2px 30px 5px 2px;
  box-sizing: border-box; /* adjusts for padding */
  flex-grow: 1; /* expand to fill remaining space */
  flex-basis: calc(25% - 10px); /* 4 items per row, adjust for the 5px margin */
}

.element5 {
  background-color: red;
}

<div class="contenidor">
  <div class="element1">bloque 1</div>
  <div class="element2">bloque 2</div>
  <div class="element3">bloque 3</div>
  <div class="element4">bloque 4</div>
  <div class="element5">bloque 5</div>
 </div>

Answer 2

1. На самом деле нет причин делать что-то подобное div[class*=element], просто укажите класс с точкой div.element

2. одна из причин, по которой ваш код не делаетне работа в том, что вы пропускаете размер коробки.Таким образом, добавление отступов и полей приведет к росту ваших детей до нужного размера.

3. При работе с flex используйте параметры flex, это действительно упростит вашу работу.

Хороший учебник по использованию flex-box вы можете найти здесь https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Вот простой способ сделать это.

 div {
      border: 1px solid black;
       box-sizing: border-box;
    }
    
    .parent {
      display: flex;
      flex-wrap: wrap;
      justify-content: stretch;
    }
    
    .child {
      flex: 1 0 25%;
    }

<div class="parent">
      <div class="child">I am one</div>
      <div class="child">I am two</div>
      <div class="child">I am three</div>
      <div class="child">I am four</div>
      <div class="child">I am five</div>
    </div>

   

Answer 3

* {
  margin: 0;
  box-sizing: border-box;
}

section {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
}

section > div {
  flex-basis: 25%;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.1);
  text-align: center;
}

section > div:last-child {
  flex-basis: 100%;
}

<section>
  <div>
  1
  </div>
  <div>
  2
  </div>
  <div>
  3
  </div>
  <div>
  4
  </div>
  <div>
  5
  </div>
</section>