Estou tentando entender como display:flex funciona, mas sempre que eu definir isso, os filhos não "tomam toda a largura. Eu estava esperando os três divs recebendo um 33% da largura da tela. O que estou fazendo errado?
.flexbox {
display: flex;
}
.flexbox div {
border: 1px solid black;
padding: 10px;
}<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>Respostas:
3 para resposta № 1Você precisa informar os itens flex para expandir. Eles não consomem espaço livre por padrão.
A configuração inicial de flex-basis é auto, o que significa que os itens aceitam o tamanho do conteúdo.
A configuração inicial de flex-grow é 0, o que significa que os itens não crescerão em todo o espaço disponível.
Adicionar flex: 1 aos seus itens, o que equivale a: flex: 1 1 0, que é a abreviação de:
flex-grow: 1flex-shrink: 1flex-basis: 0.
.flexbox {
display: flex;
}
.flexbox div {
flex: 1; /* new */
border: 1px solid black;
padding: 10px;
}<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>1 para resposta № 2
Aqui está:
<html>
<head>
<style>
.flexbox {
display: flex;
}
.flexbox div {
flex: 1;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
</html>
Para fazer com que os elementos filhos cresçam, você precisará adicioná-los a uma das propriedades flexíveis. Aqui está um ótimo artigo sobre o flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/