Properti Flex Basis di Flexbox

Dasar Fleksibel

The flex-basisproperti mendefinisikan ukuran flex-itemsepanjang sumbu utama wadah fleksibel. Sumbu utama adalah horizontal jika flex-directiondisetel ke rowdan akan vertikal jika flex-directionproperti disetel ke column.

Sintaksis

flex-basis: auto | content |  | ;

flex-basis: otomatis

flex-basis: automencari ukuran utama elemen dan menentukan ukurannya. Misalnya, pada wadah fleksibel horizontal, autoakan mencari widthdan heightjika sumbu wadah vertikal.

Jika tidak ada ukuran yang ditentukan, autoakan kembali ke content.

flex-basis: konten

flex-basis: contentmenyelesaikan ukuran berdasarkan konten elemen, kecuali widthatau heightdisetel melalui normal box-sizing.

Dalam kedua kasus di mana flex-basissalah satu autoatau content, jika ukuran utama ditentukan, ukuran itu akan diprioritaskan.

flex-basis:

Ini hanya sebagai menentukan widthatau height, tetapi hanya lebih fleksibel. flex-basis: 20em;akan mengatur ukuran awal elemen menjadi 20em. Ukuran akhirnya akan didasarkan pada ruang yang tersedia, flex-growbanyak dan flex-shrinkbanyak.

Spesifikasi menyarankan penggunaan flexproperti singkatan. Ini membantu menulis flex-basisbersama flex-growdan flex-shrinkproperti.

Contoh

Berikut adalah baris container flex individual dan elemen flex individual yang menunjukkan bagaimana flex-basispengaruhnya terhadap box-sizing.

efek basis fleksibel pada sumbu horizontal

Ketika flex-directionada column, hal yang sama flex-basisakan mengontrol heightproperti. Anda bisa melihatnya pada contoh di bawah ini:

contoh pengontrol ketinggian berbasis-fleksibel dalam wadah vertikal

Informasi Lebih Lanjut:

Anda dapat mendanai referensi tambahan tentang properti basis fleksibel di halaman berikut:

  • Spesifikasi CSS level 1
  • Halaman Jaringan Pengembang Mozilla pada basis fleksibel

Info lebih lanjut tentang Flexbox:

  • Tip dan Trik CSS Flexbox
  • Flexbox - cheatsheet pamungkas