Nilai default.: 0 1 otomatis.

W3C merekomendasikan penggunaan properti Flex yang disingkat, alih-alih properti individual, karena Flex dengan benar mengatur ulang komponen yang tidak ditentukan untuk penggunaan khas.

menyelaraskan diri.

Properti self-mandiri memungkinkan Anda untuk menimpa penyelarasan default (atau nilai yang ditentukan melalui item Align) untuk elemen flex individu. Untuk memahami nilai-nilai yang tersedia, lihat deskripsi Align-Item untuk wadah Flex.

Nilai-nilai

Untuk elemen fleksibel ketiga dan keempat, penyelarasan ditimpa melalui properti self-mandiri.

Modul FlexBox-Leuauta. (Kotak fleksibel - "blok fleksibel", pada saat ini Rekomendasi kandidat W3C) menempatkan tugas untuk menawarkan cara yang lebih efisien untuk meletakkan, meratakan dan mendistribusikan ruang kosong antar elemen dalam wadah, bahkan ketika ukurannya tidak diketahui dan / atau dinamis (karenanya "fleksibel").

Gagasan utama dari penjaga flex dalam wadah diberkahi dengan kemampuan untuk mengubah lebar / tinggi (dan urutan) elemen-elemennya untuk mengisi ruang terbaik (dalam banyak kasus - untuk mendukung semua jenis tampilan dan ukuran layar ). Wadah fleksibel membentang elemen untuk mengisi ruang kosong atau mengompresnya untuk mencegah perbatasan.

Yang paling penting, FlexBox-Lealieut tidak tergantung pada arah, berbeda dengan Leiants (blok, yang terletak secara vertikal, dan elemen inline secara horizontal). Sementara Lealieut biasa sangat bagus untuk halaman web, itu tidak memiliki fleksibilitas (tidak ada calalybur) untuk mendukung aplikasi besar atau kompleks (terutama ketika datang untuk mengubah orientasi layar, mengubah ukuran, peregangan, kompresi, dll.)

Komentar: FlexBox-Leuaout paling cocok untuk bagian komposit aplikasi dan leuaiutics skala kecil, sedangkan Grid lebih banyak digunakan untuk LAIAN skala besar.

Dasar-dasarnya

Karena Flexbox adalah keseluruhan modul, dan bukan hanya satu properti, itu menggabungkan banyak properti. Beberapa dari mereka harus diterapkan pada wadah (elemen induk, yang disebut wadah fleksibel.), sementara sifat-sifat lain berlaku untuk elemen anak, atau elemen flex..

Jika leuaout biasa didasarkan pada arahan elemen blok dan inline, fleksibel-liut didasarkan pada "arah aliran fleksibel". Lihat skema ini dari spesifikasi yang menjelaskan ide dasar Flex-Leuaitov.

Sebagian besar elemen akan didistribusikan bersama sumbu Utama. (dari mulai utama. sebelum main-end.) atau Sepanjang axis melintang (dari cross-start. sebelum cross-end.).

• sumbu utama. - Sumbu utama di mana elemen fleksibel berada. Catatan, itu belum tentu horizontal, semuanya tergantung pada properti flex direction (lihat di bawah).
• mulai utama. | main-end. - Elemen Flex ditempatkan dalam wadah dari posisi utama-mulai ke posisi utama.
• ukuran utama. - Lebar atau tinggi elemen flex tergantung pada nilai primer yang dipilih. Nilai utamanya dapat berupa lebar atau tinggi elemen.
• sumbu silang. - Sumbu transversal tegak lurus terhadap yang utama. Arahnya tergantung pada arah sumbu utama.
• cross-start. | cross-end. - Baris Flex diisi dengan elemen dan terletak di wadah dari posisi silang ke posisi cross-end.
• ukuran silang - Lebar atau ketinggian elemen flex, tergantung pada ukuran dimensi, sama dengan besarnya ini. Properti ini bertepatan dengan lebar atau tinggi item tergantung pada ukuran dimensi.

Properti

tampilan: Flex | Inline-flex;

Ini berlaku untuk:

Menentukan wadah fleksibel (inline atau blok, tergantung pada nilai yang dipilih), menghubungkan konteks fleksibel untuk semua keturunan langsungnya.

Mengingat:

• Kolom CSS tidak berfungsi dengan wadah fleksibel
• float, jelas dan vertikal-align tidak bekerja dengan elemen flex

arah fleksibel.

Ini berlaku untuk: Elemen parental fleksibel-wadah.

Atur sumbu utama sumbu utama, sehingga menentukan arah untuk elemen flex yang ditempatkan dalam wadah.

• baris (default): dari kiri ke kanan untuk LTR, kanan ke kiri untuk RTL;
• row-Reverse: Kanan kiri untuk LTR, dari kiri ke kanan untuk RTL;
• kolom: mirip dengan baris, top down;
• kolom-terbalik: Mirip dengan baris-terbalik, ke atas.

flex-wrap.

Ini berlaku untuk: Elemen parental fleksibel-wadah.

Menentukan apakah wadah akan menjadi satu-line atau multi-line, serta arah sumbu transversal menentukan arah di mana baris baru akan berada.

• nowrap (default): satu baris / dari kiri ke kanan untuk LTR, kanan ke kiri untuk RTL;
• bungkus: Multi-line / dari kiri ke kanan untuk LTR, kanan ke kiri untuk RTL;
• bungkus-terbalik: Multi-line / kanan kiri untuk LTR, dari kiri ke kanan untuk RTL.

fleksibel-flow.

Ini berlaku untuk: Elemen parental fleksibel-wadah.

Ini adalah pengurangan untuk sifat-sifat fleksibel dan bungkus fleksi, yang bersama-sama menentukan sumbu utama dan transversal. Default mengambil nilai baris sekarang.

Ini berlaku untuk: Elemen parental fleksibel-wadah.

Menentukan penyelarasan relatif terhadap sumbu utama. Membantu mendistribusikan ruang kosong yang tersisa dalam kasus ketika elemen-elemen garis tidak "meregangkan", atau meregangkan, tetapi telah mencapai ukuran maksimumnya. Juga memungkinkan dalam beberapa cara untuk mengontrol keselarasan elemen-elemen ketika string dirilis.

• flex-Start: Elemen digeser ke awal baris;
• flex-end: elemen digeser oleh ujung string;
• pusat: Elemen diselaraskan di tengah garis;
• space-Antara: Elemen didistribusikan secara merata (elemen pertama di awal baris, yang terakhir - di akhir);
• space-sekitar: Elemen didistribusikan secara merata dengan jarak yang sama antara mereka dan batas-batas string.

Ini berlaku untuk: Elemen parental fleksibel-wadah.

Menentukan perilaku default untuk elemen flex relatif terhadap sumbu transverse pada baris saat ini. Pertimbangkan versi pembenaran-konten ini untuk sumbu transversal (tegak lurus dengan utama).

• flex-Start: Batas silang untuk item terletak di posisi lintas-mulai;
• flex-end: Batas lintas-ujung untuk item terletak pada posisi lintas-ujung;
• pusat: Elemen diselaraskan di tengah sumbu transversal;
• baseline: Elemen diselaraskan untuk baseline mereka;
• stretch (default): Elemen diregangkan, mengisi wadah (memperhitungkan lebar min-width / maks).

Ini berlaku untuk: Elemen parental fleksibel-wadah.

Menyelaraskan garis kontainer flex di hadapan ruang kosong pada sumbu transversal, dengan cara yang sama seperti yang dilakukan oleh pembenaran pada sumbu utama.

Komentar: Properti ini tidak berfungsi dengan flexbox baris tunggal.

• flex-Start: Garis diselaraskan relatif terhadap awal wadah;
• flex-end: baris selaras relatif terhadap akhir wadah;
• pusat: baris diselaraskan di tengah wadah;
• ruang-antara: baris didistribusikan secara merata (baris pertama di awal baris, yang terakhir ada di akhir);
• space-sekitar: baris didistribusikan secara merata dengan jarak yang sama;
• stretch (default): baris diregangkan, mengisi ruang kosong.

memesan

Ini berlaku untuk:

Secara default, elemen Flex terletak dalam urutan aslinya. Namun, properti pesanan dapat mengontrol urutan lokasi mereka dalam wadah.

Memesan:<integer\u003e

fleksibel tumbuh.

Ini berlaku untuk: Elemen elemen putri / fleksibel.

Menentukan untuk elemen flex kemampuan untuk "tumbuh" jika perlu. Mengambil nilai yang diindeks yang berfungsi sebagai proporsi. Ini menentukan fraksi ruang kosong apa di dalam wadah dan elemen mungkin menempati.

Jika semua item memiliki properti fleksibel sebagai 1, maka setiap keturunan akan menerima ukuran yang sama di dalam wadah. Jika Anda menetapkan salah satu keturunan hingga 2, maka akan memakan waktu dua kali lebih banyak daripada yang lain.

Flex-Grow:<nomor\u003e (default 0)

flex-Susut.

Ini berlaku untuk: Elemen elemen putri / fleksibel.

Menentukan untuk elemen flex kemampuan untuk mengompres jika perlu.

Flex-Susut: (Default 1)

Angka negatif tidak diterima.

fleksibil.

Ini berlaku untuk: Elemen elemen putri / fleksibel.

Menentukan ukuran default untuk elemen sebelum distribusi ruang dalam wadah.

Flex-Basis:<panjang\u003e. | Otomatis (Auto default)

melenturkan

Ini berlaku untuk: Elemen elemen putri / fleksibel.

Ini adalah reduksi untuk fleksibel, shrink-shrink dan fleksibe. Parameter kedua dan ketiga (flex-shrink, fleksible) adalah opsional. Nilai default adalah 0 1 otomatis.

menyelaraskan diri.

Ini berlaku untuk: Elemen elemen putri / fleksibel.

Memungkinkan Anda menimpa penyelarasan default atau dalam item selaras, untuk elemen flex individu.

Lihat deskripsi properti Align-Item untuk pemahaman yang lebih baik tentang nilai-nilai yang tersedia.

Contohnya

Mari kita mulai dengan contoh yang sangat, sangat sederhana, terjadi hampir setiap hari: keselarasan tepat di tengah. Tidak ada yang lebih mudah jika Anda menggunakan FlexBox.

Contoh ini didasarkan pada fakta bahwa margin dalam wadah fleksibel ditentukan sebagai otomatis menyerap ruang yang tidak perlu, sehingga tugas referensi dengan demikian garis elemen persis di tengah kedua sumbu.

Sekarang mari kita gunakan beberapa properti. Hadir satu set 6 elemen ukuran tetap (untuk kecantikan), tetapi dengan kemampuan untuk mengubah ukuran wadah. Kami ingin mendistribusikannya secara merata secara horizontal, sehingga ketika jendela browser diubah ukurannya, semuanya tampak bagus (tanpa @ media-recorder!).

Siap. Segala sesuatu yang lain adalah masalah pendaftaran. Di bawah ini adalah codepen, yang menunjukkan contoh ini. Pastikan untuk mencoba meregangkan / memeras jendela browser dan melihat apa yang terjadi.

Mari kita coba yang lain. Bayangkan bahwa kita membutuhkan navigasi yang selaras di tepi kanan di bagian paling atas situs kami, tetapi kami ingin selaras di tengah layar berukuran sedang dan berubah menjadi satu kolom pada kecil. Semuanya cukup sederhana.

Mari kita coba sesuatu yang lebih baik dan bermain dengan fleksibilitas elemen fleksibel! Bagaimana dengan berorientasi pada perangkat seluler Tata letak tiga-chone dengan topi penuh dan ruang bawah tanah? Dan urutan lokasi lain.

Jika Anda mengatakan pendek, maka tata letak dengan FlexBox memberi kami solusi sederhana dari tugas yang pernah sulit. Misalnya, ketika Anda perlu menyelaraskan elemen vertikal, atau tekan basement ke bagian bawah layar, atau cukup masukkan beberapa blok ke dalam satu baris sehingga mereka menempati semuanya ruang kosong. Tugas-tugas semacam itu diselesaikan tanpa fleksibel. Tetapi sebagai aturan, solusi ini lebih mirip dengan "kruk" - resepsi untuk menggunakan CSS tidak dimaksudkan. Sedangkan dengan FlexBox, tugas-tugas seperti itu diselesaikan persis seperti yang dipikirkan model Flex.

Modul Layout Kotak Fleksibel CSS (modul CSS untuk modul dengan blok fleksibel), FlexBox pendek, dibuat untuk menghapus kekurangan saat membuat berbagai struktur HTML, termasuk disesuaikan dengan lebar dan tinggi yang berbeda, dan buat tata letak logis dan sederhana. Dan pendekatan logis, sebagai aturan, bekerja di tempat yang tidak terduga, di mana hasilnya tidak dicentang - logika kami!

FlexBox memungkinkan Anda untuk mengontrol secara elegan parameter paling berbeda dari elemen-elemen di dalam wadah: arah, urutan, lebar, tinggi, penyelarasan, distribusi ruang bebas, peregangan dan kompresi elemen.

Pengetahuan dasar

FlexBox terdiri dari wadah dan elemen anaknya (item) (elemen fleksibel).

Untuk memasukkan FlexBox, apapun Elemen html. Cukup untuk menetapkan tampilan properti CSS: Flex; atau tampilan: inline-flex; .

Setelah menyalakan sifat flex, dua sumbu dibuat di dalam wadah: utama dan melintang (tegak lurus (⊥), sumbu silang). Semua elemen bersarang (level pertama) dibangun di sumbu utama. Secara default, sumbu utama horizontal dan memiliki arah dari kiri ke kanan (→), dan sumbu silang, masing-masing, vertikal dan diarahkan dari atas ke bawah (↓).

Sumbu utama dan silang dapat diubah di tempat, maka elemen akan terletak di atas (↓) dan ketika mereka berhenti pas, mereka akan pindah dari kiri ke kanan (→) - yaitu, sumbu hanya berubah di tempat-tempat . Pada saat yang sama, awal dan akhir lokasi elemen tidak berubah - hanya arah (sumbu) berubah! Itu sebabnya Anda perlu membayangkan sumbu di dalam wadah. Namun, tidak perlu berpikir bahwa ada beberapa kapak "fisik" di sana dan mereka memengaruhi sesuatu. Sumbu di sini hanyalah arah pergerakan elemen di dalam wadah. Misalnya, jika kami mengindikasikan penyelarasan elemen-elemen di tengah sumbu utama dan kemudian mengubah arah sumbu utama ini, itu akan berubah dan menyelaraskan: elemen-elemen berada di tengah secara horizontal, dan baja di tengah secara vertikal .. . Lihat contoh.

Fitur penting lain dari kotak Flex adalah kehadiran baris di arah melintang. Untuk memahami apa yang kita bicarakan, mari kita bayangkan bahwa ada sumbu horizontal utama, banyak elemen dan mereka tidak "memanjat" ke dalam wadah, sehingga mereka pergi ke baris lain. Itu. Wadah ini terlihat seperti ini: wadah, di dalamnya dua baris, di setiap baris untuk beberapa elemen. Disajikan? Sekarang ingat bahwa kita dapat menyelaraskan secara vertikal tidak hanya elemen, tetapi juga baris! Cara kerjanya dengan baik terlihat dalam contoh properti. Dan itu terlihat secara skematis:

Properti CSS.Yang dapat mempengaruhi model konstruksi tata letak: float, jelas, vertikal-align, kolom tidak berfungsi dalam desain flex. Ini menggunakan model lain untuk membangun tata letak dan properti CSS ini hanya diabaikan.

CSS Properties Flexbox.

FlexBox berisi aturan CSS yang berbeda untuk mengontrol seluruh desain Flex. Beberapa perlu diterapkan pada wadah utama, sementara yang lain ke elemen-elemen wadah ini.

Untuk wadah

Termasuk properti Flex untuk item. Di bawah properti ini, elemen yang diinvestasikan di dalamnya jatuh: hanya keturunan level pertama yang terpengaruh - mereka akan menjadi elemen wadah Flex.

• melenturkan - Elemen diregangkan ke seluruh lebar dan memiliki ruang penuh di antara blok di sekitarnya. Mendayung berlangsung di awal dan di ujung blok.
• inline-flex. - Elemennya disederhanakan oleh elemen lain. Dalam hal ini, bagian dalamnya diformat sebagai elemen blok, dan elemen itu sendiri seperti built-in.

flex dan inline-Flex berbeda dalam kenyataan bahwa secara berbeda berinteraksi dengan elemen-elemen di sekitarnya, seperti tampilan: blok dan tampilan: blok inline.

Mengubah arah sumbu utama wadah. Sumbu transversal berubah sesuai.

• baris (default) - Arah elemen dari kiri ke kanan (→)
• kolom. - Arah elemen dari atas ke bawah (↓)
• baris-terbalik. - Arah elemen di sebelah kanan kiri (←)
• kolom-terbalik. - Arah elemen dari bawah ke atas ()

Mengelola transfer elemen tanpa kompeten ke wadah.

• nowrap (default) - Elemen bersarang terletak di satu baris (selama arah \u003d baris) atau dalam satu kolom (selama arah \u003d kolom), terlepas dari apakah mereka ditempatkan dalam wadah atau tidak.
• membungkus. - Termasuk transfer item ke baris berikutnya jika tidak ditempatkan di wadah. Ini termasuk pergerakan elemen pada sumbu transversal.
• bungkus-terbalik. - Juga bungkus saja transfer tidak akan turun, dan naik (ke arah yang berlawanan).

Menggabungkan sifat fleksibel dan flux-wrap. Mereka sering digunakan bersama, sehingga properti Flex-Flow telah dibuat untuk menulis lebih sedikit kode.

flex-flow menerima nilai dari dua properti, dipisahkan oleh suatu ruang. Atau Anda dapat menentukan satu nilai properti apa pun.

/ * Hanya arah fleksibel * / fleksibel: baris; Flex-Flow: Row-Reverse; Fleksibel-aliran: kolom; Flex-Flow: Column-Reverse; / * Hanya Flex-Wrap * / Flex-Flow: NowRap; Flex-Flow: Bungkus; Fleksibel-aliran: membalikkan-terbalik; / * Segera kedua makna: Flex-Direction dan Flex-Wrap * / Flex-Flow: Baris NowRap; FLEX-FLOW: Bungkus kolom; FLEX-FLOW: Bungkus terbalik kolom-terbalik; Membenarkan konten:

Menyelaraskan elemen pada sumbu utama: jika arah \u003d baris, maka horizontal, dan jika arah \u003d kolom, maka secara vertikal.

• flex-Start (default) - Elemen akan pergi dari awal (pada akhirnya mungkin ada tempat).
• flex-end. - Elemen disamakan dengan akhir (tempat akan tetap pada awal)
• pusat - Di tengah (tempat akan tetap ke kiri dan kanan)
• ruang-antar. - Elemen ekstrem ditekan ke tepi (tempat antara elemen didistribusikan secara merata)
• ruang-sekitar. - Ruang kosong didistribusikan secara merata antara elemen (elemen ekstrem tidak ditekan ke tepi). Ruang antara tepi wadah dan elemen ekstrem akan dua kali kurang dari ruang antara elemen di tengah baris.
• ruang-merata

Menyelaraskan jajaran di mana elemen pada sumbu melintang berada. Sama seperti membenarkan konten hanya untuk sumbu yang berlawanan.

Catatan: Bekerja ketika setidaknya ada 2 baris, I.E. Jika hanya ada 1 baris yang terjadi.

Itu. Jika arah fleksibel: Baris, properti ini akan menyelaraskan baris yang tidak terlihat secara vertikal |. Penting untuk dicatat bahwa ketinggian blok harus diatur dengan kaku dan harus lebih besar dari ketinggian seri jika tidak, baris itu sendiri akan meregangkan wadah dan penyelarasan mereka kehilangan artinya, karena tidak ada ruang kosong di antara mereka .. . Tetapi ketika arah fleksibel: kolom, maka baris bergerak secara horizontal → dan lebar wadah hampir selalu lebih besar dari lebar seri dan penyelarasan baris segera mengakuisisi makna.

• regangan (default) - Baris peregangan mengisi tali sepenuhnya
• flex-Start. - Baris dikelompokkan di bagian atas wadah (mungkin ada tempat pada akhirnya).
• flex-end. - baris dikelompokkan di bagian bawah wadah (tempat akan tetap pada awal)
• pusat - baris dikelompokkan di tengah wadah (tempat akan tetap di tepi)
• ruang-antar. - Baris ekstrem ditekan ke arah tepinya (tempat antara baris didistribusikan secara merata)
• ruang-sekitar. - Ruang kosong didistribusikan secara merata di antara baris (elemen ekstrem tidak ditekan ke arah tepinya). Ruang antara tepi wadah dan elemen ekstrem akan dua kali kurang dari ruang antara elemen di tengah baris.
• ruang-merata - Juga ruang-sekitar, hanya jarak dalam elemen ekstrem ke tepi wadah sama dengan antara elemen.

Aligns elemen pada sumbu transversal di dalam baris (garis tak terlihat). Itu. Baris itu sendiri selaras melalui konten luring, dan elemen-elemen dalam baris ini (string) melalui align-item dan semua ini pada sumbu transverse. Tidak ada pemisahan seperti itu dari sumbu utama, tidak ada konsep seri dan elemen yang diselaraskan melalui konten pembenaran.

• regangan (default) - Elemen peregangan mengisi string sepenuhnya
• flex-Start. - Elemen-elemen ditekan ke awal baris
• flex-end. - Elemen-elemen ditekan terhadap ujung baris
• pusat - Elemen leveling di tengah baris
• baseline. - Elemen diselaraskan oleh teks dasar

Untuk elemen kontainer.

Menentukan peningkatan faktor elemen dengan adanya ruang kosong dalam wadah. Flex-Grow default: 0 I.E. Tidak ada elemen yang harus menambah dan mengisi ruang kosong dalam wadah.

Flex default-tumbuh: 0

• Jika semua elemen menunjukkan fleksibel - tumbuh: 1, maka mereka semua meregangkan dan mengisi semua ruang kosong dalam wadah.
• Jika salah satu elemen menunjukkan fleksibel-tumbuh: 1, maka itu akan mengisi semua ruang kosong dalam wadah dan penyelarasan melalui pekerjaan konten pembenaran tidak akan dapat bekerja: Tidak ada yang bisa menyelaraskan ruang ...
• Saat fleksibel tumbuh: 1. Jika salah satu dari mereka memiliki fleksibel - tumbuh: 2, itu akan 2 kali lebih banyak daripada orang lain
• Jika semua blok flex di dalam wadah fleksibel memiliki fleksibel-tumbuh: 3, maka mereka akan berukuran sama
• Dengan fleksibel-tumbuh: 3. Jika salah satu dari mereka memiliki fleksibel tumbuh: 12, itu akan menjadi 4 kali lebih banyak daripada orang lain

Bagaimana itu bekerja? Misalkan wadah memiliki lebar 500px dan berisi dua elemen, yang masing-masing memiliki lebar dasar 100px. Oleh karena itu, 300 piksel bebas tetap dalam wadah. Sekarang, jika Anda menentukan fleksibel-tumbuh: 2 elemen pertama; , dan flex-grow kedua: 1; Blok akan mengambil seluruh lebar wadah yang tersedia dan lebar blok pertama akan menjadi 300px, dan 200px kedua. Ini dijelaskan oleh fakta bahwa ruang kosong 300px yang tersedia dalam wadah didistribusikan antara elemen dalam rasio 2: 1, + 200px dari yang pertama dan + 100px kedua.

Catatan: Dalam nilai yang dapat Anda tentukan angka fraksional., misalnya: 0,5 - Flex-Grow: 0,5

Menentukan faktor pengurangan elemen. Fitur ini adalah fleksibel-tumbuh dan menentukan bagaimana elemen harus dikompresi jika tidak ada ruang kosong dalam wadah. Itu. Properti mulai bekerja ketika jumlah ukuran semua elemen lebih besar dari ukuran wadah.

Flex-Shrink Default: 1

Misalkan wadah memiliki lebar 600px dan berisi dua elemen, yang masing-masing memiliki lebar 300px - basis fleksibel: 300px; . Itu. Dua elemen sepenuhnya mengisi wadah. Elemen pertama akan menunjukkan penyusutan fleksibel: 2; , dan flex-shrink kedua: 1; . Sekarang mengurangi lebar wadah pada 300px, mis. Elemen harus dengan 300px untuk ditempatkan di dalam wadah. Mereka akan dikompres dalam rasio 2: 1, I.E. Unit pertama akan bergabung 200px, dan yang kedua hingga 100px dan dimensi baru dari elemen akan menjadi 100px dan 200px.

Catatan: Dalam nilai Anda dapat menentukan angka fraksional, misalnya: 0,5 - Susuran Flex: 0,5

Menetapkan lebar dasar elemen - lebar sebelum kondisi yang tersisa mempengaruhi lebar elemen akan dihitung. Nilai dapat ditentukan dalam PX, EM, REM,%, VW, VH, dll. Lebar terakhir akan tergantung pada lebar dasar dan nilai-nilai fleksibel-tumbuh, menyusut dan konten di dalam blok. Dengan otomatis, elemen menerima lebar dasar relatif terhadap konten di dalamnya.

Default: Auto.

Terkadang lebih baik untuk memasang lebar elemen dengan kaku melalui properti lebar yang biasa. Misalnya, lebar: 50%; Ini akan berarti bahwa elemen di dalam wadah akan tepat 50%, namun, sifat fleksibel dan shrink-shrink juga akan berfungsi. Ini mungkin diperlukan ketika elemen direntangkan oleh konten di dalamnya, lebih ditentukan secara fleksibel. Contoh.

flex-basis akan "tangguh" jika reset tarik dan kompresi: fleksibil: 200px; Flex-Grow: 0; Flex-Susut: 0; . Semua ini dapat ditulis sebagai Flex: 0 0 200px; .

Rekaman singkat dari tiga properti: Flex-Grow Flex-Shrink Flex-basis.

Default: Flex: 0 1 Auto

Namun, Anda dapat menentukan satu, dan dua nilai:

Flex: Tidak ada; / * 0 0 Auto * / / * Nomor * / Flex: 2; / * Flex-Grow (Flex-Basis Pergi ke 0) * / / * NOT Nomor * / Flex: 10em; / * Flex-Basis: 10em * / Flex: 30px; / * Flex-Basis: 30px * / Flex: Auto; / * Flex-Basis: Auto * / Flex: Content; / * Flex-Basis: Konten * / Flex: 1 30px; / * Flex-Grow and Flex-Basis * / Flex: 2 2; / * Flex-Grow and Flex-Shrink (Flex-Basis Goes 0) * / Flex: 2 2 10%; / * Flex-Grow and Flex-Shrink dan Flex-Basis * / Align-Self:

Memungkinkan Anda mengubah properti Align-Item, hanya untuk item terpisah.

Default: dari wadah align-item

• meregang. - Elemen diregangkan mengisi tali sepenuhnya
• flex-Start. - Elemen ditekan ke awal baris
• flex-end. - Elemen ditekan menjelang ujung string
• pusat - Elemen diratakan di tengah garis

baseline. - Elemen ini diselaraskan oleh garis dasar teks

Memungkinkan Anda mengubah urutan (posisi, posisi) dari elemen di baris umum.

Default: Pesanan: 0

Secara default, elemen memiliki urutan: 0 dan masukkan urutan penampilan mereka dalam kode HTML dan arah baris. Tetapi jika Anda mengubah nilai properti pesanan, item akan dibangun berdasarkan nilai: -1 0 1 2 3 .... Misalnya, jika salah satu item menunjukkan urutan: 1, maka Anda akan pertama-tama akan pergi semua nol, dan kemudian elemen dari 1.

Jadi itu mungkin, misalnya, elemen pertama berubah ke ujung, sementara tidak mengubah arah pergerakan elemen lain atau kode HTML.

Catatan

Apa perbedaan antara fleksibil dari lebar?

Di bawah perbedaan penting antara fleksibel dan lebar / tinggi:

flex-basis hanya berfungsi untuk sumbu utama. Ini berarti bahwa ketika arah fleksibel: Baris-Flex-basis mengontrol lebar (lebar), dan ketika arah fleksibel: kolom mengontrol ketinggian (tinggi). .

flex-basis hanya berlaku untuk elemen fleksibel. Jadi jika Anda menonaktifkan fleksi pada wadah, properti ini tidak akan memiliki efek.

Elemen absolut dari wadah tidak berpartisipasi dalam desain flex ... dan karenanya fleksibel tidak mempengaruhi elemen-elemen wadah fleksibel jika mereka benar-benar diposisikan: absolut. Mereka perlu menentukan lebar / tinggi.

• Saat menggunakan Nilai Flex Properties 3 (Flex-Grow / Flex-Shrink / Flex-Basis), Anda dapat menggabungkan dan menulis pendek, dan untuk lebar tumbuh atau menyusut Anda perlu menulis secara terpisah. Misalnya: Flex: 0 0 50% \u003d\u003d Lebar: 50%; Flex-Susut: 0; . Terkadang itu tidak nyaman.

Jika memungkinkan, masih memberikan fleksibil preferensi. Gunakan lebar hanya saat fleksibel tidak cocok.

Perbedaan Flex-basis dari Width - Bug atau Fich?

Konten di dalam elemen flex memotongnya dan tidak bisa melampaui batasnya. Namun, jika Anda menetapkan lebar melalui lebar atau lebar maks, dan tidak fleksibel, elemen di dalam wadah fleksibel akan dapat melampaui wadah ini (kadang-kadang Anda membutuhkan perilaku ini). Contoh:

Contoh Tata Letak Flex

Dalam contoh, di mana saja menggunakan awalan untuk lintas-browser. Saya melakukannya untuk membaca CSS yang nyaman. Karena itu, lihat contoh terbaru. versi Chrome. atau firefox.

Contoh sederhana # 1 dengan perataan vertikal dan horizontal

Mari kita mulai dengan contoh paling sederhana - leveling secara vertikal dan horizontal secara bersamaan dan pada ketinggian blok, bahkan karet.

Atau lebih, tanpa blok di dalam:

# 1.2 pemisahan (celah) antara elemen blok flex

Untuk memposisikan elemen wadah pada tepi dan secara sewenang-wenang memilih elemen setelah itu akan ada istirahat, Anda perlu menggunakan properti margin-kiri: Otomatis atau Margin-Right: Otomatis.

# 2 Menu Adaptif pada Flex

Buat menu di bagian atas halaman. Di layar lebar itu pasti benar. Rata-rata, selaras di tengah. Dan pada satu elemen kecil harus di baris baru.

# 3 Adaptif 3 kolom

Contoh ini menunjukkan seberapa cepat dan mudah membuat 3 kolom, yang, ketika menyempit, akan berubah menjadi 2 dan kemudian dalam 1.

Harap dicatat bahwa ini dapat dilakukan tanpa menggunakan aturan media, semuanya pada fleksibel.

Pergi ke jsfiddle.net dan ubah lebar bagian "Hasil"

# 4 blok adaptif pada Flex

Misalkan kita perlu menarik 3 blok, satu besar dan dua kecil. Pada saat yang sama perlu bahwa blok masuk ke layar kecil. Membuat:

Pergi ke jsfiddle.net dan ubah lebar bagian "Hasil"

Galeri # 5 pada Flex dan Transisi

Contoh ini menunjukkan seberapa cepat Anda dapat membuat akordeon mata yang cukup dengan gambar pada fleksibel. Perhatikan properti transisi untuk Flex.

# 6 Flex in Flex (hanya contoh)

Tugas membuat blok yang fleksibel. Sehingga awal teks di setiap blok berada pada garis horizontal yang sama. Itu. Dengan lebar lebar, blok tumbuh tinggi. Perlu bahwa gambar di bagian atas, tombol selalu di lantai bawah, dan teks di tengah dimulai pada satu garis horizontal ...

Untuk mengatasi masalah ini, blok itu sendiri diregangkan oleh fleksibel dan lebar maksimum yang mungkin diinstal. Setiap unit internal juga menjadi fleksibel dengan desain, dengan arah fleksibel: kolom; dan elemen di tengah (di mana teks berada) diregangkan fleksibel-tumbuh: 1; Untuk mengisi semua ruang kosong, hasilnya tercapai - teks dimulai dengan satu baris ...

Lebih banyak contoh

Dukungan browser - 98,3%

Tentu saja, tidak ada dukungan lengkap, tetapi semuanya browser modern Mendukung desain FlexBox. Bagi sebagian orang, Anda masih perlu menentukan awalan. Untuk gambaran nyata, lihat di Caniuse.com dan lihat bahwa 96,3% dari browser yang digunakan saat ini akan berfungsi tanpa awalan, dengan awalan 98,3%. Ini adalah indikator yang bagus untuk menggunakan Flexbox dengan berani.

Untuk mengetahui apa awalan yang relevan hari ini (Juni 2019), saya akan memberikan contoh semua aturan flex dengan prefixes yang diperlukan:

/ * Wadah * / .flex (display: -webkit-box; display: -ms-flexbox; display: Flex; -WebKit-inline-box; display: inline-flex; -Webkit-box-orient: vertikal; -webkit-box-direction: normal; -ms-flex-arah: kolom; arah fleksibel: kolom; -ms-flex-wrap: bungkus; -m -FLEX-FLOW: Bungkus kolom; fleksibel-aliran: Bungkus kolom; -webkit-box-pack: justify; -ms-flex-pack: membenarkan; membenarkan-konten: spasi-antara; Mendistribusikan; sejajar-konten: spasi-sekitar;) / * elemen * / .flex-item (-webkit-box-flex: 1; -ms-flex-positif: 1; -m- Flex- Negatif: 2; Flex-shrink: 2; -ms-flex-preferen-preferred-size: 100px; fleksibil: 100px; -ms-flex: 1 2 100px; Flex: -m-Flex-Item-align : Center; Align-Self: Center; -webKit-box-ordinal-group: 3; -ms-flex-order: 2;)

Lebih baik jika sifat-sifat dengan awalan akan pergi ke properti asli.
Tidak perlu untuk hari ini (dengan Caiuse) awalan hari ini (dengan Camiuse), tetapi secara umum lebih banyak.

• (Baru) - Sintaks baru: Tampilan: Flex; .
• (Tweener) - Sintaks Unofficial Old 2011: Tampilan: FlexBox; .
• (Lama) - Sintaks lama 2009: Tampilan: Kotak;

Video

Yah, jangan lupa tentang videonya, kadang-kadang juga menarik dan bisa dimengerti. Berikut ini beberapa populer:

Tautan Berguna untuk Flex

flexBoxFroggy.com - Game Edukasi Flexbox.

Flexplorer adalah perancang kode visual flex.