Unsur Fleksibel dalam CSS
Selain jenis model blok yang telah kita pelajari,
terdapat satu lagi - unsur fleksibel. Untuk
mendapatkan unsur sedemikian, ibu bapa
unsur-unsur ini perlu menulis sifat display
dengan nilai flex. Ibu bapa itu sendiri akan kekal
sebagai unsur blok, manakala anak-anaknya akan menjadi
unsur fleksibel.
Unsur fleksibel, seperti unsur blok, boleh mempunyai
lebar dan tinggi, margin dan padding.
Walau bagaimanapun, berbeza dengan unsur blok, secara lalai
unsur fleksibel disusun dalam baris di dalam
ibu bapa mereka.
Mari kita cuba:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* anak-anak akan menjadi unsur fleksibel */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
