CSS3 memperkenalkan model kotak baru - model kotak fleksibel, yang menentukan bagaimana sebuah kotak didistribusikan di antara kotak-kotak lain dan bagaimana ruang yang tersedia ditangani. Ini mirip dengan XUL (bahasa interaksi pengguna yang digunakan oleh Firefox), dan bahasa lain juga menggunakan model kotak yang sama, seperti XAML dan GladeXML.
Dengan menggunakan model ini, Anda dapat dengan mudah membuat tata letak yang lancar yang menyesuaikan dengan jendela browser atau tata letak fleksibel yang menyesuaikan dengan ukuran font. Contoh pada artikel ini menggunakan kode HTML berikut:
<tubuh>
<div id="kotak1">1</div>
<div id="kotak2">2</div>
<div id="kotak3">3</div>
</tubuh>
Model kotak tradisional menyusun kotak secara vertikal berdasarkan aliran HTML. Dengan menggunakan model flexbox Anda dapat menentukan urutan tertentu dan membalikkannya. Untuk mengaktifkan model kotak fleksibel, cukup atur nilai atribut tampilan kotak dengan kotak anak ke kotak (atau kotak sebaris).
tampilan: kotak;
Distribusi horizontal atau vertikal
"orientasi kotak" mendefinisikan sumbu koordinat distribusi: vertikal dan horizontal. Kedua nilai ini menentukan bagaimana kotak ditampilkan
tubuh{
tampilan: kotak;
orientasi kotak: horizontal;
}
distribusi terbalik
"arah kotak" dapat mengatur urutan kemunculan kotak. Secara default, Anda hanya perlu menentukan sumbu distribusi - kotak didistribusikan dengan aliran html. Jika berbentuk sumbu horizontal, distribusinya dari kiri ke kanan; jika sumbu vertikal, distribusinya dari atas ke bawah. Tentukan nilai atribut "arah kotak" sebagai "terbalik" untuk membalikkan urutan kotak.
tubuh {
tampilan: kotak;
orientasi kotak: vertikal;
arah kotak: terbalik;
}
distribusi tertentu
Atribut "box-ordinal-group" menentukan urutan distribusi kotak. Urutan distribusi dapat dikontrol sesuka hati. Grup ditentukan dengan nomor yang dimulai dari "1" dan model kotak akan mendistribusikan grup ini terlebih dahulu dan semua kotak ini akan ada di setiap grup. Pendistribusiannya akan diatur dari kecil hingga besar.
tubuh {
tampilan: kotak;
orientasi kotak: vertikal;
arah kotak: terbalik;
}
#kotak1 {
grup kotak-ordinal: 2;
}
#kotak2 {
grup kotak-ordinal: 2;
}
#kotak3 {
grup kotak-ordinal: 1;
}
