Panduan Lengkap untuk Flexbox - Trik CSS

Latar belakang

The Flexbox Layout(Box fleksibel) Modul (a Cadangan W3C Calon sehingga Oktober 2017) matlamat untuk menyediakan cara yang lebih berkesan untuk meletakkan keluar, align dan mengedarkan ruang antara barangan di dalam bekas, walaupun saiz mereka tidak diketahui dan / atau dinamik (dengan itu perkataan "flex").

Idea utama di sebalik susun atur lenturan adalah memberi keupayaan kepada wadah untuk mengubah lebar / tinggi itemnya (dan memesan) untuk mengisi ruang yang ada dengan sebaik-baiknya (kebanyakannya dapat menampung semua jenis peranti paparan dan ukuran layar). Bekas flex meluaskan barang untuk mengisi ruang kosong yang ada atau mengecilkannya untuk mengelakkan limpahan.

Yang paling penting, susun atur flexbox adalah arah-agnostik berbanding dengan susun atur biasa (blok yang berasaskan menegak dan sebaris yang didasarkan secara mendatar). Walaupun halaman tersebut berfungsi dengan baik untuk halaman, mereka tidak memiliki fleksibilitas (tidak ada yang dimaksudkan) untuk menyokong aplikasi besar atau kompleks (terutama ketika berkaitan dengan perubahan orientasi, pengubahan ukuran, peregangan, penyusutan, dll.).

Catatan: Tata letak Flexbox paling sesuai dengan komponen aplikasi, dan tata letak skala kecil, sedangkan tata letak Grid ditujukan untuk tata letak skala yang lebih besar.

Asas & Terminologi

Oleh kerana flexbox adalah keseluruhan modul dan bukan satu harta, ia melibatkan banyak perkara termasuk keseluruhan sifatnya. Beberapa dari mereka dimaksudkan untuk dipasang di wadah (elemen induk, yang dikenal sebagai "wadah flex") sedangkan yang lain dimaksudkan untuk dipasang pada anak-anak (kata "item flex").

Sekiranya susun atur "biasa" didasarkan pada arah aliran blok dan aliran sebaris, tata letak flex didasarkan pada "arah aliran fleksibel". Lihat gambar ini dari spesifikasi, menerangkan idea utama di sebalik susun atur flex.

Item akan dibentangkan sama ada main axisdari (dari main-startke main-end) atau paksi silang (dari cross-startke cross-end).

paksi utama - Paksi utama bekas fleksibel adalah paksi utama di mana item flex dibentangkan. Hati-hati, tidak semestinya mendatar; ia bergantung pada flex-directionharta tanah (lihat di bawah).
permulaan utama | main-end - Item flex diletakkan di dalam bekas bermula dari main-start dan menuju ke main-end.
ukuran utama - Lebar atau tinggi item lentur, yang mana pun dalam dimensi utama, adalah ukuran utama item. Harta ukuran utama item flex adalah harta 'lebar' atau 'tinggi', yang mana pun dalam dimensi utama.
paksi silang - Paksi yang berserenjang dengan paksi utama disebut paksi silang. Arahnya bergantung pada arah paksi utama.
permulaan silang | cross-end - Garis lentur diisi dengan barang-barang dan dimasukkan ke dalam bekas bermula dari sisi silang dari bekas lentur dan menuju ke sisi hujung silang.
ukuran silang - Lebar atau tinggi item lentur, yang mana pun dalam dimensi silang, adalah ukuran silang item. Properti ukuran silang adalah mana pun dari 'lebar' atau 'tinggi' yang berada dalam dimensi silang.

Dapatkan poster!

Rujuk panduan ini banyak? Sematkan salinan di dinding pejabat.

Beli Poster

Hartanah untuk Ibu Bapa
(wadah flex)

paparan

Ini mentakrifkan bekas lentur; sebaris atau blok bergantung pada nilai yang diberikan. Ini membolehkan konteks yang fleksibel untuk semua anak langsung.

.container ( display: flex; /* or inline-flex */ )

Perhatikan bahawa lajur CSS tidak berpengaruh pada wadah flex.

arah lentur

Ini menetapkan paksi utama, sehingga menentukan arah item flex diletakkan di dalam wadah flex. Flexbox adalah (selain pembungkus pilihan) konsep susun atur satu arah. Fikirkan item lentur sebagai peletakan terutamanya dalam baris mendatar atau lajur menegak.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(lalai): kiri ke kanan di ltr; kanan ke kiri masukrtl
row-reverse: kanan ke kiri di ltr; kiri ke kanan masukrtl
column: sama seperti rowtetapi atas ke bawah
column-reverse: sama seperti row-reversetetapi bawah ke atas

flex-wrap

Secara lalai, item flex semuanya akan sesuai dengan satu baris. Anda boleh mengubahnya dan membiarkan item membungkus seperti yang diperlukan dengan harta tanah ini.

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

nowrap (lalai): semua item flex akan berada dalam satu baris
wrap: item flex akan dibungkus ke beberapa baris, dari atas ke bawah.
wrap-reverse: item flex akan membungkus ke beberapa baris dari bawah ke atas.

Terdapat beberapa demo visual di flex-wrapsini.

aliran lentur

Ini adalah singkatan untuk flex-directiondan flex-wrapsifat, yang bersama-sama menentukan paksi utama dan sumbu silang kontena. Nilai lalai adalah row nowrap.

.container ( flex-flow: column wrap; )

membenarkan-kandungan

Ini menentukan penjajaran di sepanjang paksi utama. Ini membantu mengagihkan sisa ruang kosong tambahan apabila semua item flex pada baris tidak fleksibel, atau fleksibel tetapi telah mencapai ukuran maksimum. Ini juga memberikan beberapa kendali terhadap penjajaran item ketika melimpah garis.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (lalai): item dikemas menjelang permulaan arah lentur.
flex-end: barang dikemas menjelang hujung arah lentur.
start: barang dikemas menjelang permulaan writing-modearah.
end: barang dikemas menjelang hujung writing-modearah.
left: Barang dibungkus ke arah tepi kiri bekas, kecuali yang tidak masuk akal dengan flex-direction, maka ia berkelakuan seperti start.
right: barang dikemas ke tepi kanan bekas, kecuali jika itu tidak masuk akal flex-direction, maka ia berkelakuan seperti end.
center: item berpusat di sepanjang garis
space-between: item diedarkan secara merata dalam barisan; item pertama adalah pada baris permulaan, item terakhir pada baris akhir
space-around: item diedarkan secara merata di sebaris dengan ruang yang sama di sekelilingnya. Perhatikan bahawa ruang secara visual tidak sama, kerana semua item mempunyai ruang yang sama di kedua sisi. Item pertama akan mempunyai satu unit ruang melawan tepi bekas, tetapi dua unit ruang antara item seterusnya kerana item berikutnya mempunyai jarak tersendiri yang berlaku.
space-evenly: item diedarkan sehingga jarak antara dua item (dan ruang ke tepi) sama.

Perhatikan bahawa sokongan penyemak imbas untuk nilai-nilai ini bernuansa bernuansa. Contohnya, space-betweentidak pernah mendapat sokongan dari beberapa versi Edge, dan permulaan / akhir / kiri / kanan belum ada di Chrome. MDN mempunyai carta terperinci. Nilai paling selamat adalah flex-start, flex-end, dan center.

Terdapat juga dua kata kunci tambahan yang boleh anda pasangkan dengan nilai-nilai ini: safedan unsafe. Menggunakan safememastikan bahawa walaupun anda melakukan jenis penentuan posisi ini, anda tidak dapat mendorong elemen sedemikian rupa sehingga menjadikannya di luar layar (mis. Dari atas) sedemikian rupa sehingga konten tidak dapat digulir juga (disebut "kehilangan data") .

barang selaras

Ini menentukan tingkah laku lalai untuk bagaimana item lentur dibentangkan di sepanjang paksi silang pada garis semasa. Anggaplah ia sebagai justify-contentversi untuk paksi silang (tegak lurus dengan paksi utama).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (lalai): meregangkan untuk mengisi bekas (masih menghormati lebar minimum / lebar maksimum)
flex-start/ start/ self-start: item diletakkan pada permulaan paksi silang. Perbezaan antara keduanya adalah halus, dan berkenaan dengan menghormati flex-directionperaturan atau writing-modeperaturan.
flex-end/ end/ self-end: item diletakkan di hujung paksi silang. Perbezaannya sekali lagi adalah mengenai menghormati flex-directionperaturan berbanding writing-modeperaturan.
center: item berpusat pada paksi silang
baseline: item diselaraskan seperti garis dasar mereka sejajar

Kata kunci safedan dan unsafepengubah boleh digunakan bersama dengan semua kata kunci ini (walaupun sokongan penyemak imbas perhatikan), dan menangani dengan membantu anda mencegah penjajaran elemen sehingga kandungannya tidak dapat diakses.

menyelaraskan kandungan

Ini menyelaraskan garis wadah lentur ke dalam apabila terdapat ruang tambahan pada paksi silang, serupa dengan bagaimana justify-contentmenyelaraskan setiap item dalam paksi utama.

Catatan: Properti ini hanya berlaku pada bekas fleksibel berbilang baris, di mana flex-flowia ditetapkan sama ada wrapatau wrap-reverse). Bekas fleksibel satu baris (iaitu di mana flex-flowditetapkan pada nilai lalai, no-wrap) tidak akan mencerminkan align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (lalai): item dikemas dalam kedudukan lalai seolah-olah tidak ada nilai yang ditetapkan.
flex-start/ start: barang yang dibungkus hingga awal bekas. Yang (lebih disokong) flex-startmenghormati flex-directionsementara startmenghormati writing-modearah.
flex-end/ end: barang yang dibungkus ke hujung bekas. (Lebih banyak sokongan) flex-endmenghormati flex-directionsementara akhir menghormati writing-modearah.
center: barang berpusat di dalam bekas
space-between: barang diedarkan secara merata; baris pertama berada di awal bekas sementara yang terakhir berada di hujung
space-around: item diedarkan secara merata dengan ruang yang sama di setiap baris
space-evenly: item diedarkan secara merata dengan ruang yang sama di sekelilingnya
stretch: garis meregang untuk mengambil ruang yang tinggal

Hartanah untuk Kanak-kanak
(item flex)

pesanan

Secara lalai, item flex disusun dalam urutan sumber. Walau bagaimanapun, orderharta itu mengawal urutan kemunculannya di dalam wadah flex.

.item ( order: 5; /* default is 0 */ )

flex-tumbuh

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

.item ( flex-grow: 4; /* default 0 */ )

Negative numbers are invalid.

flex-shrink

This defines the ability for a flex item to shrink if necessary.

.item ( flex-shrink: 3; /* default 1 */ )

Negative numbers are invalid.

flex-basis

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword until deprecated). The content keyword means “size it based on the item’s content” - this keyword isn’t well supported yet, so it’s hard to test and harder to know what its brethren max-content, min-content, and fit-content do.

.item ( flex-basis: | auto; /* default auto */ )

If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value. See this graphic.

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.

.item ( flex: none | ( ? || ) )

It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.

align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Please see the align-items explanation to understand the available values.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Note that float, clear and vertical-align have no effect on a flex item.

Examples

Let’s start with a very very simple example, solving an almost daily problem: perfect centering. It couldn’t be any simpler if you use flexbox.

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

This relies on the fact a margin set to auto in a flex container absorb extra space. So setting a vertical margin of auto will make the item perfectly centered in both axes.

Now let’s use some more properties. Consider a list of 6 items, all with fixed dimensions, but can be auto-sized. We want them to be evenly distributed on the horizontal axis so that when we resize the browser, everything scales nicely, and without media queries.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Done. Everything else is just some styling concern. Below is a pen featuring this example. Be sure to go to CodePen and try resizing your windows to see what happens.

Let’s try something else. Imagine we have a right-aligned navigation element on the very top of our website, but we want it to be centered on medium-sized screens and single-columned on small devices. Easy enough.

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Let’s try something even better by playing with flex items flexibility! What about a mobile-first 3-columns layout with full-width header and footer. And independent from source order.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Prefixing Flexbox

Flexbox requires some vendor prefixing to support the most browsers possible. It doesn’t just include prepending properties with the vendor prefix, but there are actually entirely different property and value names. This is because the Flexbox spec has changed over time, creating an “old”, “tweener”, and “new” versions.

Perhaps the best way to handle this is to write in the new (and final) syntax and run your CSS through Autoprefixer, which handles the fallbacks very well.

Alternatively, here’s a Sass @mixin to help with some of the prefixing, which also gives you an idea of what kind of things need to be done:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Related Properties

A Complete Guide to Grid
Almanac entries on Grid properties, like grid-row / grid-column

Other Resources

Flexbox in the CSS specifications
Flexbox at MDN
Flexbox at Opera
Diving into Flexbox by Bocoup
Mixing syntaxes for best browser support on CSS-Tricks
Flexbox by Raphael Goetter (FR)
Flexplorer by Bennett Feely

Bugs

Flexbox is certainly not without its bugs. The best collection of them I’ve seen is Philip Walton and Greg Whitworth’s Flexbugs. It’s an open-source place to track all of them, so I think it’s best to just link to that.

Sokongan Penyemak Imbas

Dipecah oleh "versi" flexbox:

(baru) bermaksud sintaks terbaru dari spesifikasi (mis. display: flex;)
(tweener) bermaksud sintaksis tidak rasmi yang aneh dari tahun 2011 (contohnya display: flexbox;)
(lama) bermaksud sintaks lama dari 2009 (mis. display: box;)

Chrome	Safari	Firefox	Opera	IE	Hujung	Android	iOS
20- (lama) 21+ (baru)	3.1+ (lama) 6.1+ (baru)	2-21 (lama) 22+ (baru)	12.1+ (baru)	10 (tweener) 11+ (baru)	17+ (baru)	2.1+ (lama) 4.4+ (baru)	3.2+ (lama) 7.1+ (baru)

Penyemak imbas Blackberry 10+ menyokong sintaks baru.