Panduan Lengkap untuk Flexbox - Trik CSS

Latar Belakang

The Flexbox Layout(Flexible Box) modul (Rekomendasi W3C Calon per Oktober 2017) tujuan untuk memberikan cara yang lebih efisien untuk lay out, menyelaraskan dan mendistribusikan ruang di antara item dalam sebuah wadah, bahkan ketika ukuran mereka tidak diketahui dan / atau dinamis (dengan demikian kata "flex").

Ide utama di balik tata letak fleksibel adalah memberi wadah kemampuan untuk mengubah lebar / tinggi item (dan urutan) untuk mengisi ruang yang tersedia (sebagian besar untuk mengakomodasi semua jenis perangkat tampilan dan ukuran layar). Wadah fleksibel memperluas item untuk mengisi ruang kosong yang tersedia atau menyusutkannya untuk mencegah meluap.

Yang terpenting, tata letak flexbox adalah arah-agnostik sebagai lawan dari tata letak biasa (blok yang berbasis vertikal dan sebaris yang berbasis horizontal). Meskipun berfungsi dengan baik untuk halaman, mereka kekurangan fleksibilitas (tidak ada permainan kata-kata yang dimaksudkan) untuk mendukung aplikasi yang besar atau kompleks (terutama dalam hal perubahan orientasi, pengubahan ukuran, peregangan, penyusutan, dll.).

Catatan: Tata letak Flexbox paling sesuai untuk komponen aplikasi, dan tata letak skala kecil, sedangkan tata letak Kisi ditujukan untuk tata letak skala besar.

Dasar & Terminologi

Karena flexbox adalah keseluruhan modul dan bukan satu properti, ini melibatkan banyak hal termasuk seluruh rangkaian propertinya. Beberapa dari mereka dimaksudkan untuk diatur pada wadah (elemen induk, dikenal sebagai “wadah fleksibel”) sedangkan yang lainnya dimaksudkan untuk diatur pada anak-anak (dikatakan “item fleksibel”).

Jika tata letak "biasa" didasarkan pada arah blok dan aliran sebaris, tata letak fleksibel didasarkan pada "arah aliran-fleksibel". Silakan lihat gambar ini dari spesifikasinya, menjelaskan ide utama di balik tata letak fleksibel.

Item akan disusun mengikuti main axis(dari main-startke main-end) atau sumbu silang (dari cross-startke cross-end).

main axis - Sumbu utama wadah fleksibel adalah sumbu utama tempat item-item fleksibel diletakkan. Hati-hati, ini tidak selalu horizontal; itu tergantung pada flex-directionproperti (lihat di bawah).
main-mulai | main-end - Item flex ditempatkan di dalam container mulai dari main-start dan pergi ke main-end.
ukuran utama - Lebar atau tinggi item fleksibel, mana pun yang ada dalam dimensi utama, adalah ukuran utama item tersebut. Properti ukuran utama item fleksibel adalah properti 'width' atau 'height', mana saja yang ada dalam dimensi utama.
sumbu silang - Sumbu tegak lurus dengan sumbu utama disebut sumbu silang. Arahnya tergantung dari arah sumbu utama.
lintas-mulai | cross-end - Garis lentur diisi dengan item dan ditempatkan ke dalam wadah mulai dari sisi cross-start wadah flex dan menuju ke sisi cross-end.
ukuran silang - Lebar atau tinggi item fleksibel, mana pun yang berada dalam dimensi silang, adalah ukuran silang item. Properti ukuran silang adalah salah satu dari 'lebar' atau 'tinggi' yang ada dalam dimensi silang.

Dapatkan posternya!

Sering mereferensikan panduan ini? Sematkan salinan di dinding kantor.

Beli Poster

Properti untuk Induk
(wadah fleksibel)

layar

Ini mendefinisikan wadah fleksibel; sebaris atau blok tergantung pada nilai yang diberikan. Ini memungkinkan konteks fleksibel untuk semua turunan langsungnya.

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

Perhatikan bahwa kolom CSS tidak berpengaruh pada penampung fleksibel.

arah fleksibel

Ini menetapkan sumbu utama, sehingga menentukan arah item fleksibel ditempatkan di wadah fleksibel. Flexbox adalah (selain dari pembungkus opsional) konsep tata letak satu arah. Pikirkan item fleksibel sebagai tata letak utama baik dalam baris horizontal atau kolom vertikal.

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

row(default): kiri ke kanan dalam ltr; kanan ke kirirtl
row-reverse: kanan ke kiri ltr; dari kiri ke kananrtl
column: sama rowtapi dari atas ke bawah
column-reverse: sama seperti row-reversetetapi dari bawah ke atas

flex-wrap

Secara default, semua item flex akan mencoba untuk masuk ke dalam satu baris. Anda dapat mengubahnya dan mengizinkan item untuk dibungkus sesuai kebutuhan dengan properti ini.

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

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

Ada beberapa demo visual di flex-wrapsini.

aliran fleksibel

Ini adalah singkatan dari the flex-directionand flex-wrapproperties, yang bersama-sama mendefinisikan sumbu utama dan sumbu silang wadah fleksibel. Nilai defaultnya adalah row nowrap.

.container ( flex-flow: column wrap; )

membenarkan-konten

Ini mendefinisikan perataan di sepanjang sumbu utama. Ini membantu mendistribusikan sisa ruang kosong ekstra jika semua item fleksibel dalam satu baris tidak fleksibel, atau fleksibel tetapi telah mencapai ukuran maksimumnya. Ini juga memberikan beberapa kontrol atas penyelarasan item saat mereka meluap dari garis.

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

flex-start (default): item dikemas menuju awal arah-fleksibel.
flex-end: barang dikemas menjelang akhir arah fleksibel.
start: item dikemas ke awal writing-modearah.
end: item dikemas menjelang akhir writing-modepetunjuk.
left: item dikemas ke arah tepi kiri wadah, kecuali itu tidak masuk akal dengan flex-direction, maka berperilaku seperti start.
right: item dikemas ke tepi kanan wadah, kecuali itu tidak masuk akal dengan flex-direction, maka berperilaku seperti end.
center: item dipusatkan di sepanjang garis
space-between: item didistribusikan secara merata di baris; item pertama di baris awal, item terakhir di baris akhir
space-around: item didistribusikan secara merata di baris dengan ruang yang sama di sekitarnya. Perhatikan bahwa spasi secara visual tidak sama, karena semua item memiliki ruang yang sama di kedua sisi. Item pertama akan memiliki satu unit ruang di tepi wadah, tetapi dua unit ruang di antara item berikutnya karena item berikutnya memiliki spasi tersendiri yang berlaku.
space-evenly: item didistribusikan sehingga jarak antara dua item (dan spasi di tepinya) sama.

Perhatikan bahwa dukungan browser untuk nilai-nilai ini memiliki perbedaan. Misalnya, space-betweentidak pernah mendapat dukungan dari beberapa versi Edge, dan start / end / kiri / kanan belum ada di Chrome. MDN memiliki grafik rinci. Nilai-nilai yang paling aman adalah flex-start, flex-end, dan center.

Ada juga dua kata kunci tambahan yang dapat Anda pasangkan dengan nilai berikut: safedan unsafe. Menggunakan safememastikan bahwa bagaimanapun Anda melakukan jenis pemosisian ini, Anda tidak dapat mendorong elemen sedemikian rupa sehingga merender di luar layar (misalnya di bagian atas) sedemikian rupa sehingga konten tidak dapat digulir juga (disebut "kehilangan data") .

menyelaraskan-item

Ini mendefinisikan perilaku default untuk bagaimana item fleksibel diletakkan di sepanjang sumbu silang pada baris saat ini. Anggap saja sebagai justify-contentversi untuk sumbu melintang (tegak lurus dengan sumbu utama).

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

stretch (default): regangkan untuk mengisi wadah (tetap menghormati min-width / max-width)
flex-start/ start/ self-start: item ditempatkan di awal sumbu silang. Perbedaan antara keduanya tidak kentara, dan tentang menghormati flex-directionaturan atau writing-modeaturan.
flex-end/ end/ self-end: item ditempatkan di ujung sumbu silang. Perbedaannya lagi-lagi tidak kentara dan tentang menghormati flex-directionaturan vs. writing-modeaturan.
center: item dipusatkan di sumbu silang
baseline: item disejajarkan seperti garis dasarnya

Kata kunci safedan unsafepengubah dapat digunakan bersama dengan semua kata kunci lainnya (meskipun perhatikan dukungan browser), dan membantu Anda mencegah penyejajaran elemen sehingga konten menjadi tidak dapat diakses.

menyelaraskan konten

Ini meratakan garis wadah fleksibel di dalam ketika ada ruang ekstra di sumbu silang, mirip dengan bagaimana justify-contentmeratakan item individu dalam sumbu utama.

Catatan: Properti ini hanya berlaku pada penampung fleksibel multi-baris, flex-flowyang disetel ke wrapatau wrap-reverse). Penampung fleksibel satu baris (yaitu di mana flex-flowdisetel ke nilai defaultnya, 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 (default): item dikemas dalam posisi defaultnya seolah-olah tidak ada nilai yang ditetapkan.
flex-start/ start: item dikemas ke awal wadah. The (lebih didukung) flex-startmenghormati flex-directionsementara startmenghormati writing-modearah.
flex-end/ end: barang yang dikemas sampai ujung wadah. (Lebih banyak dukungan) flex-endmenghormati flex-directionsementara ujung menghormati writing-modearah.
center: item yang dipusatkan di wadah
space-between: item didistribusikan secara merata; baris pertama di awal wadah sedangkan yang terakhir ada di akhir
space-around: item didistribusikan secara merata dengan ruang yang sama di sekitar setiap baris
space-evenly: item didistribusikan secara merata dengan ruang yang sama di sekitarnya
stretch: garis membentang untuk mengambil ruang yang tersisa

Properti untuk Anak-anak
(item fleksibel)

memesan

Secara default, item flex diatur dalam urutan sumber. Namun, orderproperti mengontrol urutan kemunculannya dalam wadah fleksibel.

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

flex-grow

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.

Dukungan Browser

Dipecah oleh "versi" dari flexbox:

(baru) berarti sintaks terbaru dari spesifikasi (misalnya display: flex;)
(tweener) berarti sintaks tidak resmi yang aneh dari tahun 2011 (misalnya display: flexbox;)
(lama) berarti sintaks lama dari 2009 (misalnya display: box;)

Chrome	Safari	Firefox	Opera	YAITU	Tepi	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)

Browser Blackberry 10+ mendukung sintaks baru.