CSS flexbox: Cara mengatur lebar tetap atau fixed width
Ilustrasi

CSS flexbox: Cara mengatur lebar tetap atau fixed width

Desain web semakin mudah berkat adanya fitur CSS flexbox. Flexbox lebih dikenal dengan layout kotak-kotak yang sangat fleksibel. Tata letak laman web dengan memanfaatkan css display flex, memungkinkan elemen yang responsif secara otomatis tergantung pada ukuran layar.

Yang paling magic dari properti CSS display flex ini adalah kemampuannya untuk menyesuaikan bentuk, perataan atau alignment element HTML berdasarkan sumbu sehingga menjadi lebih sentris dan dinamis.

Intinya, dengan CSS flexbox, desain dan tata letak element web jadi lebih mudah, terutama struktur tag HTML dan style CSS jadi lebih pendek. Code yang pendek tentu lebih bersih.

Contohnya sederhana seperti memposisikan element HTML tepat berada di tengah-tengah. Dengan CSS flexbox proses centering objek menjadi lebih sederhana dan kode yang lebih ringkas.

Namun, adakalanya saat proses desain komponen element web sering kali stuck, padahal kemampuan CSS sudah semakin sakti. Misal, saat bermain-main dengan CSS flexbox, lebar container yang diinginkan tidak sesuai harapan pada mode layar responsive yang mengecil. Lebar width suatu kotak juga ikut mengecil.

Sangat menjengkelkan sekali bukan?

Kalau iya, bukan hanya saya dan kamu saja, bahkan ratusan web designer luar sana juga mengalami hal yang sama. Seperti salah satu questions Stackoverflow berikut: How to set a fixed width column with CSS flexbox

<div class="flex">
    <div class="box-1 border" style="width:200px;">
        Lorem ipsum dolor sit amet
    </div>
    <div class="box-2 border">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </div>
</div>

Hasil render browser, box-1 yang sudah ditetapkan lebar 200px akan fix lebar 200 pixel di layar lebar, namun akan ikut mengecil juga di layar smartphone.

Untuk mengatur lebar tetap atau fixed width dengan CSS flexbox, wajib menentukan CSS property flex basis, flex grow dan flex shrink.

.box-1 {
	flex-grow: 0;		/* do not grow		- initial value: 0 */
	flex-shrink: 0;		/* do not shrink	- initial value: 1 */
	flex-basis: 200px;	/* width/height		- initial value: auto */
}

Maka, hasil render elemen box-1 ukurannya akan tetap atau fixed 200px di ukuran layar manapun. Sedangkan elemen box-2 masih fleksibel dan dinamis sebagaimana fungsinya CSS flexbox.

Bentuk penulisan flex basis dapat disederhanakan menjadi:

.box-1 {
  flex: 0 0 200px;
}

Bagaimana? Mudah dan simple sekali bukan?

Comment

comments powered by Disqus