Apa perbedaan antara basis fleksibel dan lebar?


224

Ada banyak pertanyaan dan artikel tentang ini, tetapi sejauh ini tidak ada yang konklusif. Ringkasan terbaik yang bisa saya temukan adalah

flex-basis memungkinkan Anda untuk menentukan ukuran awal / awal elemen, sebelum hal lain dihitung. Ini bisa berupa persentase atau nilai absolut.

... yang dengan sendirinya tidak banyak bicara tentang perilaku elemen dengan set basis fleksibel . Dengan pengetahuan saya saat ini tentang flexbox, saya tidak mengerti mengapa itu tidak bisa menggambarkan lebar juga.

Saya ingin tahu bagaimana tepatnya flex-basis berbeda dari lebar dalam praktiknya:

  • Jika saya ganti lebar dengan basis flex (dan sebaliknya), apa yang akan berubah secara visual?
  • Apa yang terjadi jika saya menetapkan keduanya ke nilai yang berbeda? Apa yang terjadi jika mereka memiliki nilai yang sama?
  • Apakah ada beberapa kasus khusus di mana menggunakan lebar atau basis-fleksibel akan memiliki perbedaan yang signifikan untuk menggunakan yang lain?
  • Bagaimana perbedaan lebar dan dasar-fleksibel bila digunakan bersama dengan gaya-gaya kotak fleksibel lainnya, seperti flex-wrap , flex-grow dan flex-shrink ?
  • Adakah perbedaan signifikan lainnya?

Sunting / klarifikasi : Pertanyaan ini telah ditanyakan dalam format yang berbeda di Apa set properti berbasis flex yang sebenarnya? tapi saya merasa perbandingan atau ringkasan yang lebih langsung dari perbedaan basis-fleksibel dan lebar (atau tinggi ) akan menyenangkan.


Artikel terbaik yang menjelaskan dasar
kelenturan

Jawaban:


339

Mempertimbangkan flex-direction

Hal pertama yang terlintas dalam pikiran ketika membaca pertanyaan Anda adalah bahwa hal flex-basisitu tidak selalu berlaku width.

Ketika flex-directionadalah row, flex-basiskontrol lebar.

Tapi ketika flex-directionadalah column, flex-basiskontrol tinggi.


Perbedaan utama

Berikut adalah beberapa perbedaan penting antara flex-basisdan width/ height:

  • flex-basishanya berlaku untuk item fleksibel. Wadah fleksibel (yang juga bukan item fleksibel) akan diabaikan flex-basistetapi dapat digunakan widthdan height.

  • flex-basishanya bekerja pada poros utama. Misalnya, jika Anda berada di dalam flex-direction: column, widthproperti akan diperlukan untuk mengukur item fleksibel secara horizontal.

  • flex-basistidak berpengaruh pada item fleksibel yang benar-benar diposisikan. widthdan heightproperti akan diperlukan. Item fleksibel yang diposisikan benar-benar tidak berpartisipasi dalam tata letak flex .

  • Dengan menggunakan flexproperti, tiga properti - flex-grow, flex-shrinkdan flex-basis- dapat digabungkan dengan rapi menjadi satu deklarasi. Menggunakan width, aturan yang sama akan membutuhkan banyak baris kode.


Perilaku Browser

Dalam hal bagaimana mereka diterjemahkan, seharusnya tidak ada perbedaan antara flex-basisdan width, kecuali flex-basisada autoatau content.

Dari spec:

7.2.3. The flex-basisproperti

Untuk semua nilai selain autodan content, flex-basisdiselesaikan dengan cara yang sama seperti widthpada mode penulisan horizontal.

Tetapi dampak autoatau contentmungkin minimal atau tidak sama sekali. Lebih dari spec:

auto

Ketika ditentukan pada item fleksibel, autokata kunci mengambil nilai properti ukuran utama sebagai yang digunakan flex-basis. Jika nilai itu sendiri auto, maka nilai yang digunakan adalah content.

content

Menunjukkan ukuran otomatis, berdasarkan konten item fleksibel.

Catatan: Nilai ini tidak ada dalam rilis awal Layout Kotak Fleksibel, dan dengan demikian beberapa implementasi yang lebih lama tidak akan mendukungnya. Efek setara dapat dicapai dengan menggunakan autobersama dengan ukuran utama ( widthatau height) dari auto.

Jadi, sesuai dengan spesifikasi, flex-basisdan widthmenyelesaikan secara identik, kecuali flex-basisada autoatau content. Dalam kasus seperti itu, flex-basisdapat menggunakan lebar konten (yang, mungkin, widthproperti juga akan digunakan).


The flex-shrinkfaktor

Penting untuk mengingat pengaturan awal wadah fleksibel. Beberapa pengaturan ini meliputi:

  • flex-direction: row - item fleksibel akan sejajar secara horizontal
  • justify-content: flex-start - item fleksibel akan menumpuk di awal garis pada sumbu utama
  • align-items: stretch - item fleksibel akan meluas untuk menutupi ukuran silang wadah
  • flex-wrap: nowrap - item fleksibel dipaksa untuk tetap dalam satu baris
  • flex-shrink: 1 - item fleksibel diperbolehkan menyusut

Perhatikan pengaturan terakhir.

Karena item fleksibel diperbolehkan menyusut secara default (yang mencegahnya meluap wadah), flex-basis/ width/ yang ditentukan heightmungkin ditimpa.

Misalnya, flex-basis: 100pxatau width: 100px, ditambah dengan flex-shrink: 1, tidak harus 100px.

Untuk membuat lebar yang ditentukan - dan tetap memperbaikinya - Anda harus menonaktifkan penyusutan:

div {
   width: 100px;
   flex-shrink: 0;
}  

ATAU

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

ATAU, seperti yang direkomendasikan oleh spesifikasi:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2. Komponen Fleksibilitas

Penulis didorong untuk mengontrol fleksibilitas menggunakan flexsteno daripada dengan properti tangan langsung secara langsung, karena steno dengan benar me-reset komponen yang tidak ditentukan untuk mengakomodasi penggunaan umum .


Bug Peramban

Beberapa browser mengalami kesulitan menentukan ukuran item fleksibel dalam wadah fleksibel bersarang.

flex-basisdiabaikan dalam wadah fleksibel bersarang. widthbekerja.

Saat menggunakan flex-basis, wadah mengabaikan ukuran anak-anaknya, dan anak-anak meluap wadah. Tetapi dengan widthproperti itu, wadah itu menghormati ukuran anak-anaknya dan memperluasnya.

Referensi:

Contoh:


item fleksibel menggunakan flex-basisdan white-space: nowrapmeluap inline-flexwadah. widthbekerja.

Tampaknya wadah fleksibel diatur untuk inline-flextidak mengenali flex-basisseorang anak saat memberikan saudara kandung white-space: nowrap(meskipun itu bisa saja item dengan lebar yang tidak ditentukan). Wadah tidak berkembang untuk mengakomodasi barang.

Tetapi ketika widthproperti itu digunakan alih-alih flex-basis, wadah itu menghargai ukuran anak-anaknya dan memperluasnya. Ini bukan masalah di IE11 dan Edge.

Referensi:

Contoh:


flex-basis(dan flex-grow) tidak bekerja pada elemen tabel

Referensi:


flex-basisgagal di Chrome dan Firefox ketika wadah kakek-nenek adalah elemen menyusut-agar-cocok. Set-up berfungsi dengan baik di Edge.

Seperti pada contoh yang disajikan dalam tautan di atas, yang melibatkan position: absolute, penggunaan floatdan inline-block, juga akan membuat output cacat yang sama ( demo jsfiddle ).


Bug yang memengaruhi IE 10 dan 11:


2
Bagaimana dengan min-width:100px;? Bisakah itu menjadi opsi untuk menonaktifkan penyusutan?
Mori

1
@Mori, ya, flex-shrinkberhenti di min-width. Aturan fleksibel yang setara adalah flex: 1 0 100px.
Michael Benjamin

flex: 1 0 100pxmengarah ke hasil yang sama, tetapi saya tidak yakin apa yang Anda maksud dengan "setara".
Mori

Maksud saya mengapa kita tidak menganggapnya sama flex: 0 0 100px, misalnya?
Mori

2
@Mori, karena itu sama dengan lebar . Dibutuhkan flex-grow: 1 komponen untuk memungkinkan elemen tumbuh dari lebar minimum, yang ditentukan oleh flex-basis .
Michael Benjamin

33

Selain ringkasan bagus Michael_B, ada baiknya mengulangi ini:

flex-basis memungkinkan Anda untuk menentukan ukuran awal / awal elemen, sebelum hal lain dihitung. Ini bisa berupa persentase atau nilai absolut.

Bagian penting di sini adalah inisial .

Dengan sendirinya, ini tidak menyelesaikan lebar / tinggi sampai flex tumbuh / menyusut sifat ikut bermain.

Begitu. seorang anak dengan

.child {
 flex-basis:25%;
 flex-grow:1;
}

akan menjadi lebar 25% pada awalnya tetapi kemudian segera berkembang sebanyak mungkin sampai elemen-elemen lain masuk. Jika tidak ada .. itu akan menjadi lebar 100% / tinggi.

Demo cepat:

Bereksperimen dengan flex-grow, flex-shrinkdan flex-basis (atau singkatan flex :fg fs fb) ... dapat menghasilkan beberapa hasil menarik.


Saya menemukan bahwa umumnya dalam konteks flex mereka berdua flex-basisdan width / heightmengatur ukuran awal / awal elemen. Sebagai contoh flex-basis: 200pxpada dasarnya bekerja sama dengan flex-basis: auto; width: 200px;. Sepertinya ketika flex-basistidak diatur untuk autokemudian hanya menimpa width / heightnilai. Satu-satunya perbedaan yang saya lihat adalah cara penanganan konten melimpah.
Karolis

5

Mungkin poin paling penting untuk ditambahkan:

Bagaimana jika browser tidak mendukung flex? Dalam kasus seperti itu, width/heightambil alih dan nilainya berlaku.

Ini adalah ide yang sangat bagus - hampir esensial - untuk mendefinisikan width/heightelemen, bahkan jika Anda memiliki nilai yang sangat berbeda flex-basis. Ingatlah untuk menguji dengan menonaktifkan display:flexdan melihat apa yang Anda dapatkan.


2
Di antara browser utama, satu-satunya yang tidak mendukung properti flex adalah IE <10. caniuse.com/#search=flex
Michael Benjamin

1
@Michael_B Tentu, dan mungkin hanya saya, tetapi saya juga harus mendukung browser seluler, hingga dan termasuk browser Nintendo 3DS, yang jelas-jelas tidak mendukung flex.
Niet the Dark Absol
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.