Как начать новую строку с определенного элемента с помощью Flexbox?
Это очень простое упражнение, но я не могу найти способ его решить (только начал изучать HTML и CSS).
Мне нужно, чтобы 5-й блок («блок 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>
Ответы 3
На самом деле нет причин делать что-то подобное
div[class*=element]просто укажите класс с точкойdiv.elementодна из причин, по которой ваш код не работает, заключается в том, что вам не хватает размера коробки. Добавление отступов и полей таким образом увеличит ваши дочерние элементы до желаемого размера.
При работе с 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>
* {
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>суть наличия n элементов подряд с flexbox заключается в том, что набивка и поле также необходимо учитывать, потому что вы упаковка flexbox. Я сделал следующие изменения в вашем коде:
для обертывания флексбокса нужно поставить
flex-wrap: wrapна флексбокс-контейнер,чтобы получить 4 элемента в строке, вы можете использовать
flex-basisкак 25% и настроить поля, используяcalc,чтобы получить строки с менее чем 4 элементами заполнить доступное пространство, вы также можете рассмотреть
flex-grow: 1на гибкие элементы,также рассмотрите возможность добавления
box-sizing: border-boxкelement*, чтобы набивка был включен в ширина (и, следовательно, в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>