Elementos Flex em CSS
Além dos tipos de modelos de bloco que estudamos,
há outro - elementos flex. Para obter
tais elementos, é necessário escrever a propriedade
display com o valor flex
no elemento pai
desses elementos. O próprio pai permanecerá
um elemento de bloco, mas seus filhos se tornarão
elementos flex.
Elementos flex, assim como os elementos de bloco, podem ter
largura e altura, margin e padding.
No entanto, ao contrário dos elementos de bloco, por padrão,
os elementos flex são dispostos em linha dentro
de seu pai.
Vamos tentar:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* os filhos serão elementos flex */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
