Harta Tanah Flex di Flexbox

Asas Flex

The flex-basisharta mentakrifkan saiz flex-itemsepanjang paksi utama bekas flex. Paksi utama mendatar jika flex-directiondiset ke rowdan ia akan tegak jika flex-directionharta itu ditetapkan column.

Sintaks

flex-basis: auto | content |  | ;

flex-base: automatik

flex-basis: automelihat ukuran utama elemen dan menentukan ukuran. Contohnya, pada bekas lentur mendatar, autoakan mencari widthdan heightjika paksi kontena itu menegak.

Sekiranya tidak ada ukuran yang ditentukan, autoakan jatuh kembali ke content.

flex-base: kandungan

flex-basis: contentmenyelesaikan ukuran berdasarkan kandungan elemen, kecuali widthatau heightditetapkan normal box-sizing.

Dalam kedua-dua kes di mana flex-basissalah satu autoatau content, jika ukuran utama ditentukan, ukuran itu akan diutamakan.

asas flex:

Ini sama seperti menentukan widthatau height, tetapi hanya lebih fleksibel. flex-basis: 20em;akan menetapkan ukuran awal elemen ke 20em. Ukuran akhirnya akan berdasarkan pada ruang yang tersedia, flex-growberganda dan flex-shrinkberganda.

Spesifikasi menunjukkan penggunaan flexharta tanah pendek. Ini membantu menulis flex-basisbersama flex-growdan flex-shrinksifat.

Contoh

Berikut adalah barisan wadah flex individu dan elemen flex individu yang menunjukkan bagaimana flex-basismempengaruhi box-sizing.

kesan asas lentur pada paksi mendatar

Apabila flex-directionada column, perkara yang sama flex-basisakan mengawal heightharta tanah. Anda dapat melihatnya dalam contoh di bawah:

contoh ketinggian kawalan asas lentur dalam bekas menegak

Maklumat lanjut:

Anda boleh membiayai rujukan tambahan mengenai sifat asas flex di halaman berikut:

  • Tahap spesifikasi CSS 1
  • Halaman Rangkaian Pembangun Mozilla secara flex-basis

Maklumat lanjut mengenai Flexbox:

  • Petua dan trik CSS Flexbox
  • Flexbox - cheatsheet utama