Estava fazendo uma página de exercício e tive uma dúvida com display: flex
. Veja o exemplo. Tenho uma DIV
centralizada e dentro dela outras DIVs
menores.
Abaixo o HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="teste.css">
</head>
<body>
<div class="centro">
<div class="conteudo" id="um"></div>
<div class="conteudo" id="dois"></div>
<div class="conteudo" id="tres"></div>
<div class="conteudo" id="quatro"></div>
<div class="conteudo" id="cinco"></div>
<div class="conteudo" id="seis"></div>
<div class="conteudo" id="sete"></div>
<div class="conteudo" id="oito"></div>
</div>
</body>
</html>
No caso acima usei justify-content: space-around
e flex-wrap: wrap
. Nas linhas onde há 3 itens fica legal, mas na última linha onde tem dois ele centraliza.
Sei que isso é por causa do space-around
. Eu gostaria de saber se tem alguma forma dos itens da última linha ficarem alinhados abaixo (primeira e segunda coluna) mas ainda usando display: flex
para manter o ajuste do conteúdo conforme a dimensão da janela?
Segue meu CSS
* {
margin: 0;
padding: 0;
}
html, body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.centro {
width: 80%;
height: 50%;
border: 2px solid #808080;
transform: translate(10%,50%);
padding: 5px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.conteudo {
width: 230px;
height: 230px;
border: 5px dashed #808080;
}