Elemen Flex di CSS
Selain jenis model blok yang telah kita pelajari,
ada satu lagi - elemen flex. Untuk
mendapatkan elemen seperti itu, induk
dari elemen-elemen ini perlu diberi properti
display
dengan nilai
flex. Induk itu sendiri akan tetap menjadi
elemen blok, tetapi keturunannya akan menjadi
elemen flex.
Elemen flex, seperti elemen blok, dapat memiliki
lebar dan tinggi, margin dan padding.
Namun, tidak seperti elemen blok, secara default
elemen flex disusun dalam satu baris di dalam
induknya.
Mari kita coba:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* keturunan akan menjadi elemen flex */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
