Como quebrar a linha (elemento "limpar") na flexbox CSS
é possível "limpar" o elemento num recipiente "mostrar: flex"?
Quero conseguir algo assim.- 20 elementos seguidos num ecrã grande
- 10 elementos em linha num ecrã mais pequeno
- 5 elementos em linha num ecrã pequeno
3 answers
Como @ BoltClock sugeriu, você pode "redimensionar o seu recipiente flexível para acomodar o número de itens em cada linha e deixá-los embrulhar organicamente".
Se quiser mesmo limpar uma linha semelhante ao uso de flutuadores, poderá definir uma margem na direcção que deseja limpar.
element{
margin-right: calc( 100% - widthOfelement);
}
*{
box-sizing: border-box;
}
.parent{
display: flex;
width: 600px;
height: auto;
flex-wrap: wrap;
border: 1px grey dashed;
}
.child{
width: 100px;
height: 50px;
border: 1px orangered solid;
background-color: skyblue;
}
/*add "clear" after first child*/
.child:nth-child(1){
margin-right: calc(100% - 100px);
}
/*add "clear" after third child*/
.child:nth-child(3){
margin-right: calc(100% - 200px);
}<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>Pode adicionar flex-wrap: wrap; ao Contentor e definir a largura dos elementos no interior.
Então você deve ter o controle para decidir quais os elementos que a flutuante vai parar.
Pode tentar adicionar uma largura com percentagens aos elementos dentro do contentor , juntamente com a propriedade flex-wrap: wrap. Então, com uma consulta de mídia, você manipula a largura dos referidos elementos dado um ponto de ruptura. Aqui está um exemplo:
.container {
display: flex;
flex-wrap: wrap;
}
.element {
width: calc(25% - 20px);
height: 100px;
margin: 10px;
background-color: red;
}
@media(max-width: 800px) {
.element {
width: calc(50% - 20px);
}
}<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>