Apa perbedaan antara basis fleksibel dan lebar?

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.

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:

• Chrome tidak memperluas induk fleksibel menurut konten anak-anak
• Barang fleksibel meluap saat menggunakan basis fleksibel
• Perbedaan antara lebar dan dasar flex
• Basis fleksibel diabaikan ketika mengukur wadah fleksibel bersarang.
• flex-basis: 100px melakukan sesuatu yang berbeda dari lebar: 100px + flex-basis: auto

Contoh:

• https://jsfiddle.net/t419zhra/ (sumber: @Dremora )
• https://codepen.io/anon/pen/NVxaoy (sumber @Daniel )
• https://jsfiddle.net/voc9grx6/ (sumber: Chromium Bugs )
• https://jsfiddle.net/qjpat9zk/ (sumber: Chromium Bugs )

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:

• inline flex lebar kontainer tidak bertambah
• Inline flex container (display: inline-flex) memperluas lebar penuh container induk

Contoh:

• https://jsfiddle.net/p18h0jxt/1/ (dari pos pertama di atas)

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

Referensi:

• Mengapa flex-box bekerja dengan div, tetapi tidak dengan meja?
• Mengapa flex-grow: 1 tidak berfungsi untuk tabel di Safari? (dan Tepi)

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

• Wadah yang benar-benar diposisikan tidak memperluas lebar agar sesuai dengan konten flexbox

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:

• flexdeklarasi steno dengan flex-basisnilai unitless diabaikan
• flex-basis tidak memperhitungkan box-sizing: border-box
• flex-basis tidak mendukung calc()
• Pentingnya diabaikan flex-basissaat menggunakan flexsingkatan

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:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

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

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.