Semua properti flexbox. Flexbox: Prinsip Tata Letak CSS Baru. Membuat tata letak adaptif

Singkatnya, tata letak dengan Flexbox memberi kami solusi sederhana untuk tugas yang dulunya sulit. Misalnya, saat Anda perlu menyelaraskan elemen secara vertikal, atau mendorong footer ke bagian bawah layar, atau cukup menyisipkan beberapa blok dalam satu baris sehingga menempati semua ruang kosong. Tugas serupa diselesaikan tanpa fleksibel. Tetapi sebagai aturan, solusi ini lebih seperti "kruk" - trik menggunakan css untuk tujuan lain. Sedangkan dengan flexbox, tugas-tugas seperti itu diselesaikan persis seperti yang dibayangkan oleh model flex.

Modul Tata Letak Kotak Fleksibel CSS (modul CSS untuk tata letak dengan blok fleksibel), singkatnya flexbox, dibuat untuk menghilangkan kelemahan saat membuat berbagai macam struktur HTML, termasuk yang disesuaikan dengan lebar dan tinggi yang berbeda, dan membuat tata letak logis dan sederhana . Dan pendekatan logis, sebagai suatu peraturan, bekerja di tempat-tempat yang tidak terduga, di mana hasilnya tidak diperiksa - logika adalah segalanya bagi kita!

Flexbox memungkinkan Anda mengontrol berbagai parameter secara elegan untuk elemen di dalam wadah: arah, urutan, lebar, tinggi, perataan sepanjang dan melintang, distribusi ruang kosong, peregangan dan penyusutan elemen.

Pengetahuan dasar

FlexBox terdiri dari Kontainer dan Elemen Anaknya (item) (item fleksibel).

Untuk mengaktifkan flexbox, setiap elemen HTML hanya perlu mengatur properti css ke display:flex; atau tampilan: inline-flex; .

Setelah mengaktifkan properti flex, dua sumbu dibuat di dalam wadah: utama dan melintang (tegak lurus (⊥), sumbu silang). Semua elemen bersarang (dari tingkat pertama) disejajarkan di sepanjang sumbu utama. Secara default, sumbu utama adalah 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 ditukar, kemudian elemen akan ditempatkan dari atas ke bawah (↓) dan ketika tidak lagi sesuai tingginya, mereka akan bergerak dari kiri ke kanan (→) - yaitu, sumbu hanya ditukar. Dalam hal ini, awal dan akhir susunan elemen tidak berubah - hanya arah (sumbu) yang berubah! Itu sebabnya Anda perlu memikirkan kapak di dalam wadah. Namun, orang tidak boleh berpikir bahwa ada beberapa sumbu "fisik" di sana dan itu mempengaruhi sesuatu. Sumbu di sini hanyalah arah pergerakan elemen di dalam wadah. Misalnya, jika kita menentukan perataan elemen ke pusat sumbu utama dan kemudian mengubah arah sumbu utama ini, maka perataan juga akan berubah: elemen berada di tengah secara horizontal, dan menjadi di tengah secara vertikal.. Lihat contoh.

Fitur penting lainnya dari Flexbox adalah adanya baris dalam arah melintang. Untuk memahami apa yang kita bicarakan, mari kita bayangkan bahwa ada sumbu horizontal utama, banyak elemen dan mereka tidak "naik" ke dalam wadah, sehingga mereka pindah ke baris lain. Itu. wadahnya terlihat seperti ini: wadah, di dalamnya ada dua baris, setiap baris memiliki beberapa elemen. Diwakili? Dan sekarang ingat bahwa kita tidak hanya dapat menyelaraskan elemen secara vertikal, tetapi juga baris! Cara kerjanya jelas terlihat pada contoh untuk file . Dan begini tampilannya secara skematis:

Properti CSS yang dapat memengaruhi model tata letak: float , clear , vertical-align , kolom tidak berfungsi dalam konstruksi fleksibel. Model tata letak yang berbeda digunakan di sini dan properti css ini diabaikan begitu saja.

Properti CSS Flexbox

Flexbox berisi aturan css yang berbeda untuk mengontrol seluruh desain fleksibel. Beberapa perlu diterapkan ke wadah utama, dan yang lainnya ke elemen wadah ini.

Untuk wadah

Mengaktifkan properti flex untuk elemen. Elemen itu sendiri dan elemen yang bersarang di dalamnya termasuk dalam properti ini: hanya keturunan dari tingkat pertama yang terpengaruh - mereka akan menjadi elemen wadah fleksibel.

• melenturkan- elemen membentang hingga lebar penuh dan memiliki ruang penuh di antara blok-blok di sekitarnya. Ada jeda baris di awal dan di akhir blok.
• inline-flex- elemen dililitkan oleh elemen lain. Pada saat yang sama, bagian internalnya diformat sebagai elemen blok, dan elemen itu sendiri diformat sebagai elemen sebaris.

flex dan inline-flex berbeda karena mereka berinteraksi secara berbeda dengan elemen sekitarnya, mirip dengan display:block dan display:inline-block .

Mengubah arah sumbu utama wadah. Sumbu transversal berubah sesuai.

• baris (bawaan)- arah elemen dari kiri ke kanan (→)
• kolom- arah elemen dari atas ke bawah (↓)
• baris terbalik- arah elemen dari kanan ke kiri (←)
• kolom terbalik- arah elemen dari bawah ke atas ()

Mengontrol pembungkus elemen yang tidak muat dalam wadah.

• nowrap (default)- elemen bersarang diatur dalam satu baris (dengan arah=baris) atau dalam satu kolom (dengan arah=kolom) terlepas dari apakah mereka ditempatkan dalam wadah atau tidak.
• membungkus- termasuk pemindahan elemen ke baris berikutnya jika tidak muat di wadah. Ini memungkinkan pergerakan elemen di sepanjang sumbu transversal.
• bungkus terbalik- sama seperti bungkus hanya transfernya tidak akan turun, tetapi naik (ke arah yang berlawanan).

Menggabungkan properti flex-direction dan flex-wrap. Mereka sering digunakan bersama-sama, sehingga properti flex-flow dibuat untuk menulis lebih sedikit kode.

flex-flow mengambil nilai dari dua properti ini yang dipisahkan oleh spasi. Atau Anda dapat menentukan satu nilai untuk properti apa pun.

/* flex-direction saja */ flex-flow: row; flex-flow: baris-terbalik; aliran fleksibel: kolom; flex-flow: kolom-terbalik; /* flex-wrap saja */ flex-flow: nowrap; aliran fleksibel: bungkus; flex-flow: wrap-reverse; /* kedua nilai sekaligus: flex-direction dan flex-wrap */ flex-flow: row nowrap; flex-flow: bungkus kolom; flex-flow: kolom-terbalik wrap-reverse; membenarkan konten:

Sejajarkan elemen di sepanjang sumbu utama: jika arah=baris, maka secara horizontal, dan jika arah=kolom, maka secara vertikal.

• mulai fleksibel (default)- elemen akan pergi dari awal (mungkin ada ruang di akhir).
• ujung fleksibel- elemen disejajarkan di akhir (tempat akan tetap di awal)
• tengah- di tengah (tempat akan tetap di kiri dan kanan)
• ruang antara- elemen ekstrim ditekan ke tepi (ruang antara elemen didistribusikan secara merata)
• ruang di sekitar- ruang kosong didistribusikan secara merata di antara elemen-elemen (elemen ekstrem tidak ditekan ke tepi). Jarak antara tepi wadah dan elemen terluar akan menjadi setengah jarak antara elemen di tengah baris.
• ruang-merata

Menyejajarkan baris yang berisi elemen di sepanjang sumbu transversal. Sama seperti justify-content tetapi untuk sumbu yang berlawanan.

Catatan: Berfungsi ketika setidaknya ada 2 baris, mis. jika hanya ada 1 baris, tidak akan terjadi apa-apa.

Itu. jika flex-direction: row , maka properti ini akan menyelaraskan baris tak terlihat secara vertikal . Penting untuk dicatat di sini bahwa ketinggian balok harus diatur secara kaku dan harus lebih besar dari ketinggian baris, jika tidak, baris itu sendiri akan meregangkan wadah dan penyelarasan apa pun kehilangan maknanya, karena tidak ada ruang kosong. di antara mereka... Tetapi ketika flex-direction: column , maka baris bergerak secara horizontal → dan lebar wadah hampir selalu lebih besar dari lebar baris dan perataan baris segera masuk akal...

• peregangan (default)- baris direntangkan untuk mengisi baris sepenuhnya
• mulai fleksibel- baris dikelompokkan di bagian atas wadah (mungkin ada ruang di bagian akhir).
• ujung fleksibel- baris dikelompokkan di bagian bawah wadah (tempat akan tetap di awal)
• tengah- baris dikelompokkan di tengah wadah (tempat akan tetap di tepi)
• ruang antara- baris ekstrem ditekan ke tepi (ruang antara baris didistribusikan secara merata)
• ruang di sekitar- ruang kosong didistribusikan secara merata di antara baris (elemen ekstrem tidak ditekan ke tepi). Jarak antara tepi wadah dan elemen terluar akan menjadi setengah jarak antara elemen di tengah baris.
• ruang-merata- sama dengan space-around , hanya jarak elemen ekstrem ke tepi wadah yang sama dengan jarak antar elemen.

Menyejajarkan elemen di sepanjang sumbu transversal dalam satu baris (baris tak terlihat). Itu. baris itu sendiri disejajarkan melalui align-content , dan elemen-elemen di dalam baris ini (baris) melalui align-item dan semua ini di sepanjang sumbu transversal. Tidak ada pemisahan seperti itu di sepanjang sumbu utama, tidak ada konsep baris dan elemen disejajarkan menggunakan justify-content .

• peregangan (default)- elemen diregangkan untuk mengisi garis sepenuhnya
• mulai fleksibel- elemen ditekan ke awal baris
• ujung fleksibel- elemen ditekan ke akhir baris
• tengah- elemen disejajarkan di tengah baris
• garis dasar- elemen disejajarkan dengan garis dasar teks

Untuk elemen wadah

Menentukan faktor untuk meningkatkan elemen ketika ada ruang kosong di wadah. Flex-grow default: 0 mis. tidak ada elemen yang harus tumbuh dan mengisi ruang kosong di wadah.

Tumbuh fleksibel default: 0

• Jika Anda menentukan flex-grow:1 untuk semua elemen, maka semuanya meregang dengan cara yang sama dan mengisi semua ruang kosong di dalam wadah.
• Jika Anda menentukan flex-grow:1 untuk salah satu elemen, maka itu akan mengisi semua ruang kosong di wadah dan penyelarasan melalui justify-content tidak akan berfungsi lagi: tidak ada ruang kosong untuk disejajarkan...
• Dengan flex-grow:1 . Jika salah satunya memiliki flex-grow:2 maka itu akan menjadi 2x lebih besar dari yang lain
• Jika semua kotak fleksibel di dalam wadah fleksibel memiliki flex-grow:3 , maka ukurannya akan sama
• Dengan flex-grow:3 . Jika salah satu dari mereka memiliki flex-grow:12 maka itu akan menjadi 4 kali lebih besar dari yang lain

Bagaimana itu bekerja? Katakanlah wadah itu lebar 500px dan berisi dua elemen, masing-masing dengan lebar dasar 100px. Jadi ada 300 piksel bebas yang tersisa di wadah. Sekarang, jika kita mengatur elemen pertama ke flex-grow:2; , dan flex-grow kedua: 1; , maka blok akan mengambil seluruh lebar wadah yang tersedia dan lebar blok pertama adalah 300px, dan yang kedua 200px. Hal ini dijelaskan oleh fakta bahwa 300px ruang kosong yang tersedia dalam penampung didistribusikan di antara elemen-elemen dalam rasio 2:1, +200px ke yang pertama dan +100px ke yang kedua.

Catatan: Anda dapat menentukan angka pecahan dalam nilai, misalnya: 0,5 - flex-grow:0,5

Menentukan faktor reduksi untuk elemen. Properti adalah kebalikan dari flex-grow dan menentukan bagaimana elemen harus menyusut jika tidak ada ruang kosong yang tersisa di wadah. Itu. properti mulai bekerja ketika jumlah ukuran semua elemen lebih besar dari ukuran wadah.

flex-shrink default: 1

Katakanlah wadah itu lebar 600px dan berisi dua elemen, masing-masing lebar 300px - flex-basis:300px; . Itu. dua elemen benar-benar mengisi wadah. Mari kita tentukan flex-shrink: 2 untuk elemen pertama; , dan flex-shrink kedua: 1; . Sekarang mari kita kurangi lebar wadah sebesar 300px, mis. elemen perlu menyusut 300px agar muat di dalam wadah. Mereka akan dikompresi dalam rasio 2:1, yaitu. blok pertama akan menyusut sebesar 200px dan yang kedua sebesar 100px dan ukuran elemen baru akan menjadi 100px dan 200px.

Catatan: Anda dapat menentukan angka pecahan dalam nilai, misalnya: 0,5 - flex-shrink:0.5

Menyetel lebar dasar elemen - lebar sebelum kondisi lain yang memengaruhi lebar elemen dihitung. Nilai dapat ditentukan dalam px, em, rem, %, vw, vh, dll. Lebar akhir akan tergantung pada lebar dasar dan nilai flex-grow, flex-shrink dan konten di dalam blok. Dengan auto , elemen mendapatkan lebar dasar relatif terhadap konten di dalamnya.

Bawaan: otomatis

Terkadang lebih baik untuk membuat hardcode lebar elemen menggunakan properti lebar yang sudah dikenal. Misalnya, lebar: 50%; akan berarti bahwa elemen di dalam wadah akan tepat 50%, namun, properti flex-grow dan flex-shrink akan tetap berfungsi. Ini mungkin diperlukan ketika elemen diregangkan oleh konten di dalamnya, lebih dari yang ditentukan dalam basis fleksibel. Contoh.

flex-basis akan menjadi "keras" jika stretch dan shrink disetel ke nol: flex-basis:200px; flex-tumbuh:0; flex-shrink:0; . Semua ini dapat ditulis sebagai flex:0 0 200px; .

Tiga singkatan properti: flex-grow flex-shrink flex-basis .

Default: fleksibel: 0 1 otomatis

Namun, Anda dapat menentukan satu atau dua nilai:

Fleksibel: tidak ada; /* 0 0 otomatis */ /* angka */ flex: 2; /* flex-grow (flex-basis menuju ke 0) */ /* bukan angka */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: otomatis */ flex: konten; /* flex-basis: konten */ flex: 1 30px; /* flex-grow dan flex-basis */ flex: 2 2; /* flex-grow dan flex-shrink (basis fleksibel menjadi 0) */ flex: 2 2 10%; /* flex-grow dan flex-shrink dan flex-basis */ align-self:

Memungkinkan Anda mengubah properti align-items, hanya untuk satu elemen.

Default: dari item-align container

• menggeliat- elemen diregangkan untuk mengisi garis sepenuhnya
• mulai fleksibel- elemen ditekan ke awal baris
• ujung fleksibel- elemen ditekan ke akhir baris
• tengah- elemen disejajarkan dengan pusat garis

garis dasar- elemen disejajarkan dengan garis dasar teks

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

Bawaan: pesanan: 0

Secara default, elemen memiliki urutan: 0 dan ditempatkan dalam urutan kemunculannya dalam kode HTML dan arah baris. Tetapi jika Anda mengubah nilai properti order, maka elemen akan berbaris dalam urutan nilai: -1 0 1 2 3 ... . Misalnya, jika Anda menentukan urutan: 1 untuk salah satu elemen, maka semua nol akan didahulukan, dan kemudian elemen dengan 1.

Jadi Anda bisa, misalnya, membuang elemen pertama sampai akhir, tanpa mengubah arah pergerakan elemen atau kode HTML yang tersisa.

Catatan

Bagaimana flex-basis berbeda dari lebar?

Di bawah ini adalah perbedaan penting antara flex-basis dan lebar/tinggi:

flex-basis hanya berfungsi untuk sumbu utama. Ini berarti bahwa dengan flex-direction:row flex-basis mengontrol lebar (width), dan dengan flex-direction:column mengontrol tinggi (height). .

flex-basis hanya berlaku untuk item fleksibel. Ini berarti jika Anda menonaktifkan flex pada container, properti ini tidak akan berpengaruh.

Elemen container absolut tidak berpartisipasi dalam konstruksi flex... Ini berarti bahwa flex-basis tidak memengaruhi elemen container flex jika mereka adalah absolute position:absolute . Mereka perlu menentukan lebar/tinggi.

• Saat menggunakan properti flex 3, nilai-nilai (flex-grow/flex-shrink/flex-basis) dapat digabungkan dan ditulis pendek, sedangkan untuk lebar atau menyusut harus ditulis secara terpisah. Misalnya: flex:0 0 50% == lebar:50%; flex-shrink:0; . Terkadang itu hanya tidak nyaman.

Jika memungkinkan, tetap lebih suka flex-basis . Hanya gunakan lebar jika basis fleksibel tidak pas.

Apakah perbedaan antara basis fleksibel dan lebar merupakan bug atau fitur?

Konten di dalam elemen fleksibel memperluasnya dan tidak dapat melampauinya. Namun, jika Anda mengatur lebar melalui width atau max-width daripada flex-basis , maka elemen di dalam flex container akan dapat keluar dari container ini (terkadang perilaku ini diperlukan). Contoh:

Contoh tata letak fleksibel

Dalam contoh, awalan untuk kompatibilitas lintas-browser tidak digunakan di mana pun. Saya melakukan ini untuk membaca css dengan mudah. Oleh karena itu, lihat versi terbaru Chrome atau Firefox sebagai contoh.

#1 Contoh perataan vertikal dan horizontal sederhana

Mari kita mulai dengan contoh paling sederhana - perataan vertikal dan horizontal pada saat yang sama dan pada ketinggian balok berapa pun, bahkan karet.

Atau seperti ini, tanpa blok di dalamnya:

#1.2 Pemisahan (celah) antara elemen blok fleksibel

Untuk memposisikan elemen wadah di tepi dan secara sewenang-wenang memilih elemen setelah itu akan ada celah, Anda perlu menggunakan properti margin-left:auto atau margin-right:auto.

#2 Menu responsif secara fleksibel

Mari kita membuat menu di bagian paling atas halaman. Pada layar lebar, itu harus di sebelah kanan. Rata-rata, sejajarkan di tengah. Dan pada yang kecil, setiap elemen harus berada di baris baru.

#3 Responsif 3 kolom

Contoh ini menunjukkan cara membuat 3 kolom dengan cepat dan mudah, yang jika dipersempit, akan berubah menjadi 2 dan kemudian menjadi 1.

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

Buka jsfiddle.net dan ubah lebar bagian "hasil"

#4 Blok responsif pada flex

Katakanlah kita perlu menampilkan 3 blok, satu besar dan dua kecil. Pada saat yang sama, blok harus beradaptasi dengan layar kecil. Kami melakukan:

Buka jsfiddle.net dan ubah lebar bagian "hasil"

Galeri #5 tentang fleksibilitas dan transisi

Contoh ini menunjukkan seberapa cepat Anda dapat membuat akordeon cantik dengan gambar secara fleksibel. Perhatikan properti transisi untuk flex.

#6 Flex to Flex (hanya sebuah contoh)

Tugasnya adalah membuat blok yang fleksibel. Sehingga awal teks pada setiap blok berada pada garis horizontal yang sama. Itu. saat lebarnya menyempit, balok-balok itu bertambah tinggi. Saya perlu gambar berada di atas, tombol selalu di bawah, dan teks di tengah untuk memulai pada satu garis horizontal...

Untuk mengatasi masalah ini, balok-balok itu sendiri diregangkan secara fleksibel dan lebar maksimum yang mungkin ditetapkan untuknya. Setiap blok bagian dalam juga merupakan konstruksi fleksibel, dengan arah-fleksibel:kolom diputar; dan elemen di tengah (tempat teks berada) diregangkan dengan flex-grow:1; untuk mengisi semua ruang kosong, sehingga hasilnya tercapai - teks dimulai dengan satu baris ...

Contoh lainnya

Dukungan peramban - 98,3%

Tentu saja, tidak ada dukungan penuh, tetapi semua browser modern mendukung konstruksi flexbox. Beberapa masih memerlukan awalan. Untuk gambaran nyata, mari kita lihat caniuse.com dan lihat bahwa 96,3% browser yang digunakan saat ini akan bekerja tanpa awalan, dengan 98,3% awalan. Ini adalah indikator yang bagus untuk berani menggunakan flexbox.

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

/* Wadah */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertikal; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:column wrap; flex-flow:column wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-line-pack: mendistribusikan; align-content:space-around; ) /* Items */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negatif:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )

Lebih baik jika properti dengan awalan mendahului properti aslinya.
Tidak ada awalan yang tidak diperlukan untuk hari ini (menurut caniuse) dalam daftar ini, tetapi secara umum ada lebih banyak awalan.

• (baru) - sintaks baru: tampilan: fleksibel; .
• (tweener) - sintaks tidak resmi 2011 lama: tampilan: flexbox; .
• (lama) - sintaks lama 2009: tampilan: kotak;

Video

Nah, jangan lupa tentang videonya, terkadang juga menarik dan mudah dipahami. Berikut adalah beberapa yang populer:

Tautan Fleksibel yang Berguna

flexboxfroggy.com - permainan belajar flexbox.

Flexplorer adalah konstruktor kode fleksibel visual.

Tentang betapa mudahnya bekerja dengan Flexbox pada contoh tata letak templat situs berita.

Percayalah, tidak perlu membahas semua detail bekerja dengan Flexbox jika Anda ingin mulai menggunakannya sekarang. Dalam tutorial ini, penulis akan memperkenalkan Anda pada beberapa fitur Flexbox dan membuat "tata letak berita" yang mirip dengan apa yang mungkin Anda lihat di situs web The Guardian.

Alasan penulis menggunakan Flexbox adalah karena banyaknya kemungkinan yang diberikannya:
- kemudahan membuat kolom adaptif;
- membuat kolom dengan ketinggian yang sama;
- kemampuan untuk mendorong isi ke bagian bawah wadah.

Ayo pergi!

1. Mulailah dengan membuat dua kolom

Pada gilirannya, Flexbox menyederhanakan proses ini dengan sejumlah keunggulan seperti:

Menulis kode yang lebih bersih: yang perlu kita lakukan hanyalah membuat wadah dengan aturan tampilan: fleksibel;
- fleksibilitas: kita dapat mengubah ukuran, meregangkan, dan menyelaraskan kolom dengan mengubah beberapa baris CSS;
- markup semantik;
- selain itu, dengan penggunaan Flexbox, tidak perlu membatalkan pembungkus untuk menghindari perilaku tata letak yang tidak terduga.

Mari kita mulai dengan membuat dua kolom, satu yang akan mengambil 2/3 dari lebar wadah kita, dan satu yang akan mengambil 1/3 dari itu.

Wadah kolom;
- dua elemen anak kolom, salah satunya memiliki kelas tambahan kolom utama, yang kita gunakan nanti untuk membuat kolom lebih lebar.

Kolom ( display: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Karena kolom utama memiliki nilai fleksibel sama dengan 2 , maka kolom ini akan memakan ruang dua kali lebih banyak dari kolom kedua.

Mari tambahkan beberapa desain visual dan, sebagai hasilnya, kita mendapatkan:

Klik untuk melihat beraksi

2. Jadikan setiap kolom sebagai wadah flexbox

Jadi, kami membutuhkan artikel untuk:

Disusun secara vertikal di dalam kolom kontainer;
- mengambil semua ruang yang tersedia.

aturan arah fleksibel: kolom ditentukan untuk wadah, bersama dengan aturan fleksibel: 1 ditentukan untuk elemen anak memungkinkan artikel untuk mengisi semua ruang kosong secara vertikal, sambil menjaga ketinggian dua kolom pertama tidak berubah.

Klik untuk melihat beraksi

3. Membuat wadah dari artikel

judul;
- gugus kalimat;
- panel informasi dengan nama penulis dan jumlah komentar;
- beberapa gambar adaptif.

Di sini kita menggunakan Flexbox untuk mendorong bilah info ke bagian bawah elemen. Di sini, lihat hasil apa yang kita harapkan.

Dan di sini adalah kode itu sendiri:

Kami juga telah menerapkan properti fleksibel: 1 ke elemen artikel-konten, sehingga merentangkannya ke semua ruang kosong dan menekan informasi artikel ke bawah. Tinggi kolom tidak menjadi masalah dalam kasus ini.

Klik untuk melihat beraksi

4. Menambahkan Beberapa Kolom Bersarang

Kolom bersarang ( flex: 2; )
Kolom ini sekarang akan menjadi dua kali lebih lebar dari yang kedua.

Klik untuk melihat beraksi

5. Membuat artikel pertama dengan layout horizontal

Artikel pertama ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( height: 300px; order: 2; padding-top: 0; width: 400px; )
Properti memesan memainkan peran besar dalam hal ini, karena memungkinkan Anda untuk mengubah urutan elemen HTML tanpa mengubah markup HTML. Pada kenyataannya, artikel-gambar dalam kode datang sebelum elemen artikel-tubuh, tetapi berperilaku seolah-olah setelah itu.

Klik untuk melihat beraksi

6. Membuat tata letak adaptif

Salah satu hal hebat tentang Flexbox adalah Anda dapat dengan mudah menghapus aturan tampilan: fleksibel dalam wadah untuk menonaktifkannya sepenuhnya (Flexbox), sedangkan properti lainnya (seperti menyelaraskan-item atau melenturkan) akan tetap beroperasi.

Akibatnya, kita dapat mengaktifkan tata letak responsif dengan mengaktifkan Flexbox hanya saat diperlukan.

Jadi kita akan menghapus tampilan: fleksibel dari pemilih .kolom dan .kolom, alih-alih "mengemas" mereka ke dalam kueri media:

@media screen dan (min-width: 800px) ( .columns, .column ( display: flex; ) )
Itu saja! Pada layar dengan resolusi kecil, semua artikel akan ditempatkan satu di atas yang lain, dan pada layar dengan resolusi lebih dari 800 piksel - dalam dua kolom.

7. Menambahkan Sentuhan Akhir

@media screen dan (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( height: 300px ; order: 2; padding-top: 0; lebar: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
Isi artikel pertama sejajar secara horizontal dengan teks di sisi kiri dan gambar di sisi kanan. Juga, kolom utama sekarang lebih lebar (75%). Hal yang sama berlaku untuk kolom bersarang (66%).

Dan inilah hasil akhirnya!

Klik untuk melihat beraksi

Kesimpulan

Tentang betapa mudahnya bekerja dengan Flexbox pada contoh tata letak templat situs berita.

Percayalah, tidak perlu membahas semua detail bekerja dengan Flexbox jika Anda ingin mulai menggunakannya sekarang. Dalam tutorial ini, penulis akan memperkenalkan Anda pada beberapa fitur Flexbox dan membuat "tata letak berita" yang mirip dengan apa yang mungkin Anda lihat di situs web The Guardian.

Alasan penulis menggunakan Flexbox adalah karena banyaknya kemungkinan yang diberikannya:
- kemudahan membuat kolom adaptif;
- membuat kolom dengan ketinggian yang sama;
- kemampuan untuk mendorong isi ke bagian bawah wadah.

Ayo pergi!

1. Mulailah dengan membuat dua kolom

Pada gilirannya, Flexbox menyederhanakan proses ini dengan sejumlah keunggulan seperti:

Menulis kode yang lebih bersih: yang perlu kita lakukan hanyalah membuat wadah dengan aturan tampilan: fleksibel;
- fleksibilitas: kita dapat mengubah ukuran, meregangkan, dan menyelaraskan kolom dengan mengubah beberapa baris CSS;
- markup semantik;
- selain itu, dengan penggunaan Flexbox, tidak perlu membatalkan pembungkus untuk menghindari perilaku tata letak yang tidak terduga.

Mari kita mulai dengan membuat dua kolom, satu yang akan mengambil 2/3 dari lebar wadah kita, dan satu yang akan mengambil 1/3 dari itu.

Wadah kolom;
- dua elemen anak kolom, salah satunya memiliki kelas tambahan kolom utama, yang kita gunakan nanti untuk membuat kolom lebih lebar.

Kolom ( display: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Karena kolom utama memiliki nilai fleksibel sama dengan 2 , maka kolom ini akan memakan ruang dua kali lebih banyak dari kolom kedua.

Mari tambahkan beberapa desain visual dan, sebagai hasilnya, kita mendapatkan:

Klik untuk melihat beraksi

2. Jadikan setiap kolom sebagai wadah flexbox

Jadi, kami membutuhkan artikel untuk:

Disusun secara vertikal di dalam kolom kontainer;
- mengambil semua ruang yang tersedia.

aturan arah fleksibel: kolom ditentukan untuk wadah, bersama dengan aturan fleksibel: 1 ditentukan untuk elemen anak memungkinkan artikel untuk mengisi semua ruang kosong secara vertikal, sambil menjaga ketinggian dua kolom pertama tidak berubah.

Klik untuk melihat beraksi

3. Membuat wadah dari artikel

judul;
- gugus kalimat;
- panel informasi dengan nama penulis dan jumlah komentar;
- beberapa gambar adaptif.

Di sini kita menggunakan Flexbox untuk mendorong bilah info ke bagian bawah elemen. Di sini, lihat hasil apa yang kita harapkan.

Dan di sini adalah kode itu sendiri:

Kami juga telah menerapkan properti fleksibel: 1 ke elemen artikel-konten, sehingga merentangkannya ke semua ruang kosong dan menekan informasi artikel ke bawah. Tinggi kolom tidak menjadi masalah dalam kasus ini.

Klik untuk melihat beraksi

4. Menambahkan Beberapa Kolom Bersarang

Kolom bersarang ( flex: 2; )
Kolom ini sekarang akan menjadi dua kali lebih lebar dari yang kedua.

Klik untuk melihat beraksi

5. Membuat artikel pertama dengan layout horizontal

Artikel pertama ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( height: 300px; order: 2; padding-top: 0; width: 400px; )
Properti memesan memainkan peran besar dalam hal ini, karena memungkinkan Anda untuk mengubah urutan elemen HTML tanpa mengubah markup HTML. Pada kenyataannya, artikel-gambar dalam kode datang sebelum elemen artikel-tubuh, tetapi berperilaku seolah-olah setelah itu.

Klik untuk melihat beraksi

6. Membuat tata letak adaptif

Salah satu hal hebat tentang Flexbox adalah Anda dapat dengan mudah menghapus aturan tampilan: fleksibel dalam wadah untuk menonaktifkannya sepenuhnya (Flexbox), sedangkan properti lainnya (seperti menyelaraskan-item atau melenturkan) akan tetap beroperasi.

Akibatnya, kita dapat mengaktifkan tata letak responsif dengan mengaktifkan Flexbox hanya saat diperlukan.

Jadi kita akan menghapus tampilan: fleksibel dari pemilih .kolom dan .kolom, alih-alih "mengemas" mereka ke dalam kueri media:

@media screen dan (min-width: 800px) ( .columns, .column ( display: flex; ) )
Itu saja! Pada layar dengan resolusi kecil, semua artikel akan ditempatkan satu di atas yang lain, dan pada layar dengan resolusi lebih dari 800 piksel - dalam dua kolom.

7. Menambahkan Sentuhan Akhir

@media screen dan (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( height: 300px ; order: 2; padding-top: 0; lebar: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
Isi artikel pertama sejajar secara horizontal dengan teks di sisi kiri dan gambar di sisi kanan. Juga, kolom utama sekarang lebih lebar (75%). Hal yang sama berlaku untuk kolom bersarang (66%).

Dan inilah hasil akhirnya!

Klik untuk melihat beraksi

Kesimpulan

Hei habr!

Suatu malam yang indah, yang tidak menandakan sesuatu yang menarik, obrolan kami menerima proposal dari penulis publikasi, yang ditulis olehnya pada musim semi 2012, untuk menulis artikel remake, tetapi menggunakan FlexBox dan penjelasan yang menyertainya tentang apa dan bagaimana itu bekerja. Setelah beberapa keraguan, minat untuk memahami spesifikasi lebih dalam masih menang, dan saya duduk dengan aman untuk mengeset contoh-contoh itu. Dalam perjalanan pencelupan di area ini, banyak nuansa mulai muncul, yang berubah menjadi sesuatu yang lebih dari sekadar membalik tata letak. Secara umum, dalam artikel ini saya ingin berbicara tentang spesifikasi luar biasa yang disebut "Modul Tata Letak Kotak Fleksibel CSS" dan menunjukkan beberapa fitur dan contoh aplikasi yang menarik. Semua yang tertarik, saya mengundang Anda untuk habrakat.

Yang ingin saya perhatikan, untuk tata letak tata letak di FlexBox, pengembang akan memerlukan beberapa tingkat adaptasi. Dengan contoh saya sendiri, saya merasa bahwa pengalaman bertahun-tahun memainkan lelucon yang kejam. FlexBox membutuhkan ide yang sedikit berbeda tentang bagaimana elemen diatur dalam sebuah aliran.

Bagian teknis

Jadi. Ada dua jenis item utama di FlexBox: Flex Container dan turunannya, Flex Items. Untuk menginisialisasi wadah, cukup untuk menetapkan, melalui css, ke elemen tampilan: fleksibel; atau tampilan: inline-flex;. Perbedaan antara flex dan inline-flex hanya pada prinsip interaksi dengan elemen di sekitar container, seperti display: block; dan tampilan: inline-block;, masing-masing.

Di dalam wadah fleksibel, dua sumbu dibuat, sumbu utama dan sumbu tegak lurus atau sumbu silang. Sebagian besar elemen fleksibel berbaris tepat di sepanjang sumbu utama, dan kemudian di sepanjang sumbu silang. Secara default, sumbu utama adalah horizontal dan berjalan dari kiri ke kanan, sedangkan sumbu silang adalah vertikal dan berjalan dari atas ke bawah.

Arah sumbu dapat dikontrol menggunakan properti css arah fleksibel. Properti ini mengambil sejumlah nilai:
baris(default): Sumbu utama wadah fleksibel memiliki orientasi yang sama dengan sumbu sebaris dari mode arah baris saat ini. Awal (main-start) dan akhir (main-end) dari arah sumbu utama sesuai dengan awal (inline-start) dan akhir (inline-end) dari sumbu inline (inline-axis).
baris terbalik: Semuanya sama seperti di baris hanya main-start dan main-end yang ditukar.
kolom: sama seperti baris, hanya sekarang sumbu utama diarahkan dari atas ke bawah.
kolom terbalik: sama seperti baris-terbalik, hanya sumbu utama dari bawah ke atas.
Cara kerjanya bisa dilihat pada contoh jsfiddle.

Secara default, semua item fleksibel dalam wadah muat di satu baris, meskipun tidak muat di wadah, mereka melampaui batas wadah. Perilaku ini diaktifkan menggunakan properti bungkus fleksibel. Properti ini memiliki tiga status:
sekarang(default): Item fleksibel berbaris dari kiri ke kanan.
membungkus: elemen fleksibel dibangun dalam mode multiline, transfer dilakukan ke arah sumbu silang, dari atas ke bawah.
bungkus terbalik: sama seperti membungkus, tetapi membungkus dari bawah ke atas.
Mari kita lihat contohnya.

Untuk kenyamanan, ada properti tambahan aliran fleksibel, di mana Anda dapat secara bersamaan menentukan arah fleksibel dan bungkus fleksibel. Ini terlihat seperti ini: aliran fleksibel:

Elemen dalam wadah dapat disejajarkan menggunakan properti membenarkan-konten sepanjang sumbu utama. Properti ini menerima sebanyak lima nilai yang berbeda.
mulai fleksibel(default): Item fleksibel disejajarkan dengan asal sumbu utama.
ujung fleksibel: Elemen disejajarkan dengan ujung sumbu utama
tengah: Elemen disejajarkan dengan pusat sumbu utama
ruang antara: Elemen menempati seluruh lebar yang tersedia di wadah, elemen terluar pas dengan tepi wadah, dan ruang kosong didistribusikan secara merata di antara elemen.
ruang di sekitar: item fleksibel disejajarkan sehingga ruang kosong didistribusikan secara merata di antara item. Tetapi perlu dicatat bahwa ruang antara tepi wadah dan elemen ekstrem akan menjadi setengah dari jarak antara elemen di tengah baris.
Tentu saja, Anda dapat mengklik contoh cara kerja properti ini.

Bukan itu saja, kami juga memiliki kemampuan untuk menyelaraskan elemen di sepanjang sumbu silang. Dengan menerapkan properti menyelaraskan-item, yang juga membutuhkan lima nilai berbeda, Anda dapat mencapai perilaku yang menarik. Properti ini memungkinkan Anda untuk menyelaraskan elemen dalam satu baris relatif satu sama lain.
mulai fleksibel: semua elemen ditekan ke awal baris
ujung fleksibel: elemen ditekan ke akhir baris
tengah: elemen disejajarkan dengan pusat baris
garis dasar: Elemen sejajar dengan garis dasar teks
menggeliat(default): Elemen diregangkan untuk mengisi seluruh baris.

Properti lain yang mirip dengan yang sebelumnya adalah menyelaraskan konten. Itu sendiri bertanggung jawab untuk menyelaraskan seluruh garis relatif terhadap wadah fleksibel. Ini tidak akan berpengaruh jika item fleksibel berada di baris yang sama. Properti mengambil enam nilai yang berbeda.
mulai fleksibel: semua garis ditekan ke awal sumbu silang
ujung fleksibel: semua garis ditekan ke ujung sumbu silang
tengah: Semua garis dalam satu pak disejajarkan dengan pusat sumbu silang
ruang antara: garis didistribusikan dari tepi atas ke bawah, meninggalkan ruang kosong di antara garis, sedangkan garis ekstrem ditekan ke tepi wadah.
ruang di sekitar: Garis didistribusikan secara merata di seluruh wadah.
menggeliat(default): Garis direntangkan untuk mengisi ruang yang tersedia.
Anda dapat mencoba cara kerja align-items dan align-content dalam contoh ini. Saya secara khusus mempresentasikan kedua properti ini dalam satu contoh, karena mereka berinteraksi cukup dekat masing-masing melakukan tugas mereka. Perhatikan apa yang terjadi ketika elemen ditempatkan pada satu baris dan pada beberapa baris.

Kami menemukan parameter wadah fleksibel, tetap berurusan dengan sifat-sifat elemen fleksibel.
Properti pertama yang akan kita perkenalkan adalah memesan. Properti ini memungkinkan Anda untuk mengubah posisi dalam aliran elemen tertentu. Secara default, semua item fleksibel memiliki urutan: 0; dan dibangun dalam urutan aliran alami. Dalam contoh, Anda dapat melihat bagaimana elemen berubah tempat jika nilai urutan yang berbeda diterapkan padanya.

Salah satu properti utama adalah dasar fleksibel. Dengan properti ini, kita dapat menentukan lebar dasar elemen fleksibel. Nilai defaultnya adalah mobil. Properti ini terkait erat dengan flex-tumbuh dan flex-shrink, yang akan saya bicarakan nanti. Menerima nilai lebar dalam px, %, em, dan unit lainnya. Ini tidak sepenuhnya lebar item fleksibel, itu semacam titik awal. Relatif terhadap elemen yang diregangkan atau menyusut. Dalam mode otomatis, elemen mendapatkan lebar dasar relatif terhadap konten di dalamnya.

flex-tumbuh pada beberapa sumber daya memiliki deskripsi yang benar-benar salah. Dikatakan bahwa seharusnya itu mengatur rasio ukuran elemen dalam wadah. Sebenarnya tidak. Properti ini menentukan faktor untuk meningkatkan elemen ketika ada ruang kosong di wadah. Nilai default untuk properti ini adalah 0. Mari kita bayangkan kita memiliki wadah fleksibel dengan lebar 500px, di dalamnya terdapat dua item fleksibel, masing-masing dengan lebar dasar 100px. Ini menyisakan 300px ruang kosong di wadah. Jika elemen pertama diberikan flex-grow: 2; dan elemen kedua diberikan flex-grow: 1;. Akibatnya, blok ini akan mengambil seluruh lebar wadah yang tersedia, hanya lebar blok pertama yang akan menjadi 300px, dan yang kedua hanya 200px. Apa yang terjadi? Apa yang terjadi adalah bahwa 300px ruang kosong yang tersedia dalam wadah didistribusikan di antara elemen-elemen dalam rasio 2:1, +200px ke yang pertama dan +100px ke yang kedua. Sebenarnya begitulah cara kerjanya.

Di sini kami dengan lancar melewati properti serupa lainnya, yaitu flex-shrink. Nilai defaultnya adalah 1. Ini juga menetapkan faktor untuk mengubah lebar elemen, hanya dalam arah yang berlawanan. Jika wadahnya lebar lebih sedikit dari jumlah lebar dasar elemen, maka properti ini berlaku. Misalnya, wadah memiliki lebar 600 piksel, dan elemen basis fleksibel masing-masing berukuran 300 piksel. Berikan elemen pertama flex-shrink: 2; dan elemen kedua flex-shrink: 1;. Sekarang mari kita mengecilkan wadah sebesar 300px. Oleh karena itu, jumlah lebar elemen adalah 300px lebih besar dari wadah. Perbedaan ini didistribusikan dalam rasio 2:1, ternyata kita kurangi 200px dari blok pertama, dan 100px dari yang kedua. Ukuran elemen baru masing-masing adalah 100px dan 200px untuk elemen pertama dan kedua. Jika kita mengatur flex-shrink ke 0, maka kita mencegah elemen menyusut menjadi kurang dari lebar dasarnya.

Sebenarnya, ini adalah deskripsi yang sangat sederhana tentang cara kerjanya, sehingga prinsip umumnya jelas. Secara lebih rinci, jika ada yang tertarik, algoritma dijelaskan dalam spesifikasi.

Ketiga properti dapat ditulis dalam bentuk singkatan menggunakan ekspresi melenturkan. Ini terlihat seperti ini:
melenturkan: ;
Dan kami juga dapat menulis dua versi yang lebih singkat, fleksibel: otomatis; dan fleksibel: tidak ada, yang berarti fleksibel: 1 1 otomatis; dan fleksibel: 0 0 otomatis; masing-masing.

Properti terakhir dari item fleksibel adalah menyelaraskan diri. Semuanya sederhana di sini, ini sama dengan align-item untuk wadah, memungkinkan Anda untuk mengganti perataan untuk elemen tertentu.

Semua lelah! Ayo contoh!

Untuk memulainya, mari kita tentukan lebar utama halaman, sejajarkan ke tengah, tekan footer ke bagian bawah halaman. Seperti biasa pada umumnya.

Html ( background: #ccc; min-height: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column; ) body ( margin: 0; padding: 0 15px ; tampilan: -webkit-flex; tampilan: flex; flex-direction: kolom; flex: auto; ) .header ( width: 100%; max-width: 960px; min-width: 430px; margin: 0 auto 30px; padding : 30px 0 10px; tampilan: -webkit-flex; tampilan: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; ).main ( width: 100%; max-width .footer ( background: #222; width: 100%; max-width: 960px; min-width : 430px; color: #eee; margin: auto; padding: 15px; box-sizing: border-box; )

Karena fakta bahwa kami menetapkan flex-grow untuk .main: 1; itu membentang ke ketinggian penuh yang tersedia, sehingga menekan footer ke bawah. Bonus dengan solusi ini adalah bahwa footer dapat memiliki ketinggian yang tidak tetap.

Sekarang mari kita tempatkan logo dan menu di header.
.logo ( ukuran font: 0; margin: -10px 10px 10px 0; tampilan: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before ( background: #222; width: 50px; height: 50px; margin: 0 10px 0 20px; border-radius: 50%; ) .logo:after ( background: #222; lebar: 90px; tinggi : 30px; ) .nav ( margin: -5px 0 0 -5px; tampilan: -webkit-flex; tampilan: flex; flex-wrap: wrap; ) .nav-itm ( background: #222; lebar: 130px; tinggi: 50px; ukuran font: 1.5rem; warna: #eee; dekorasi teks: tidak ada; margin: 5px 0 0 5px; tampilan: -webkit-flex; tampilan: flex; justify-content: center; align-items: center; )

Karena header diatur ke flex-wrap: wrap; dan justify-content: space-between; logo dan menu tersebar di sisi header yang berbeda, dan jika tidak ada cukup ruang untuk menu, itu akan bergeser secara elegan di bawah logo.

Selanjutnya, kita melihat posting atau spanduk besar, saya merasa sulit untuk mengatakan apa itu secara spesifik, tetapi bukan itu intinya. Kami memiliki gambar di sebelah kanan dan teks dengan judul di sebelah kiri. Saya pribadi menganut gagasan bahwa setiap elemen harus sefleksibel mungkin, terlepas dari apakah itu tata letak adaptif atau statis. Jadi kami memiliki bilah sisi di pos ini di mana gambar ditempatkan, sebenarnya, kami tidak dapat mengatakan dengan tepat berapa lebar yang kami butuhkan, karena hari ini kami memiliki gambar besar, besok kecil, dan setiap kali kami enggan mengulang elemen dari awal. Jadi kita membutuhkan sidebar untuk mengambil tempat yang dibutuhkan, dan sisanya untuk konten. Mari kita lakukan:

Kotak ( ukuran font: 1,25rem; tinggi baris: 1,5; gaya font: miring; margin: 0 0 40px -50px; tampilan: -webkit-flex; tampilan: flex; flex-wrap: wrap; justify-content: center; ) .box-base ( margin-left: 50px; flex: 1 0 430px; ) .box-side ( margin-left: 50px; flex: none; ) .box-img ( max-width: 100%; height : otomatis; )

Seperti yang Anda lihat untuk .box-base, di mana kita memiliki judul dan teks, saya telah menentukan lebar dasarnya dengan dasar fleksibel: 430px, dan juga melarang penyusutan blok menggunakan flex-shrink: 0;. Dengan manipulasi ini, kami telah mengatakan bahwa lebar konten tidak boleh kurang dari 430px. Dan mengingat fakta bahwa untuk .box saya tentukan bungkus-fleksibel: bungkus; pada saat sidebar dan konten tidak akan ditempatkan di container.box, sidebar akan secara otomatis berada di bawah konten. Dan semua ini tanpa menggunakan @media! Saya pikir itu benar-benar sangat keren.

Kami dibiarkan dengan konten tiga kolom. Ada beberapa solusi untuk masalah ini, saya akan menunjukkan salah satunya, di sisa tata letak ada opsi lain.
Mari buat wadah, beri nama .content dan atur.
.content ( margin-bottom: 30px; tampilan: -webkit-flex; tampilan: flex; flex-wrap: wrap; )

Wadah memiliki tiga kolom, .banners, .posts, .comments
.banners ( flex: 1 1 200px; ) .posts ( margin: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( margin: 0 0 30px 30px; flex: 1 1 200px; )

Saya mengatur kolom ke lebar dasar 200px agar kolom tidak terlalu menyempit, lebih baik jika dipindahkan di bawah satu sama lain sesuai kebutuhan.

Menurut tata letak, kami tidak dapat melakukannya tanpa @ media dengan konten, jadi kami akan menyesuaikan perilaku kolom untuk lebarnya sedikit lebih banyak<800px и <600px.
@media screen dan (max-width: 800px) ( .banners ( margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @media screen dan (max-width: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )

Itu semua keajaiban tentang membangun tata letak di FlexBox. Tugas lain yang saya suka adalah di tata letak ke-5, khususnya menyangkut adaptasi konten.

Kami melihat bagaimana posting resolusi desktop dibangun menjadi tiga kotak berturut-turut. Ketika lebar viewport kurang dari 800px, grid berubah menjadi kolom dengan posting, di mana foto posting berbaris di sisi kiri dan kanan konten posting secara bergantian. Dan jika lebarnya kurang dari 600px, foto postingan disembunyikan sama sekali.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33.33% - 30px * 2/3); tampilan: -webkit-flex; tampilan: flex; flex-wrap: wrap; ) .grid-img ( margin: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen dan (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img ( flex: 0 0 otomatis; ) .grid-itm:nth-child(even) .grid-img ( margin: 0 0 0 30px; order: 2; ) .grid-itm:nth-child(odd) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen dan (max-width: 600px) ( .grid-img ( tampilan: tidak ada; ) )

Sebenarnya, ini hanya sebagian kecil dari apa yang dapat diimplementasikan di FlexBox. Spesifikasi memungkinkan Anda membuat tata letak halaman yang sangat kompleks saat menggunakan kode sederhana.

Isi:

kotak fleksibel adalah cara baru untuk mengatur blok pada halaman. Ini adalah teknologi yang dibuat khusus untuk tata letak elemen, tidak seperti pelampung. Dengan menggunakan kotak fleksibel Anda dapat dengan mudah menyelaraskan elemen secara horizontal dan vertikal, mengubah arah dan urutan tampilan elemen, meregangkan balok hingga ketinggian penuh induknya, atau memakukannya ke tepi bawah.

UPD dari 02.02.2017: membuat cheatsheet flexbox yang praktis dengan demo langsung dan deskripsi dari spesifikasi: Flexbox cheatsheet .

Contoh hanya menggunakan sintaks baru. Pada saat penulisan ini, mereka paling benar ditampilkan di Chrome. Di Firefox mereka bekerja sebagian, di Safari mereka tidak bekerja sama sekali.

Menurut caniuse.com, kotak fleksibel tidak didukung oleh IE 8 dan 9 dan Opera Mini, dan browser lain tidak mendukung semua properti dan/atau memerlukan awalan.

Artinya, saat ini teknologi belum bisa digunakan secara luas, tetapi sekarang saatnya untuk mengenalnya lebih baik.

Pertama, Anda perlu tahu bahwa item fleksibel diatur di sepanjang sumbu. Secara default, elemen diatur secara horizontal - bersama sumbu utama- poros utama.

Juga, perlu diingat bahwa saat menggunakan kotak fleksibel float , clear dan vertical-align tidak berfungsi untuk blok bagian dalam, serta properti yang mengatur kolom dalam teks.

Mari kita siapkan tempat pengujian untuk eksperimen:

Satu blok induk (kuning) dan 5 anak.

Tampilan: fleksibel

Dan sekarang ke elemen induk kita tambahkan display: flex; . Div bagian dalam berbaris (sepanjang sumbu utama) dengan kolom dengan ketinggian yang sama, apa pun kontennya.

tampilan: fleksibel; membuat semua elemen anak cair - fleksibel , dan tidak sebaris atau blok, seperti aslinya.

Jika blok induk berisi gambar atau teks tanpa pembungkus, mereka menjadi item fleksibel anonim.

menampilkan properti untuk kotak fleksibel dapat mengambil dua nilai:

flex - berperilaku seperti elemen blok. Saat menghitung lebar balok, tata letak memiliki prioritas (jika lebar balok tidak mencukupi, konten dapat merangkak keluar dari batas).

inline-flex - berperilaku seperti inline-block. Prioritas pada konten (konten menyebarkan blok ke lebar yang dibutuhkan sehingga garisnya pas, jika memungkinkan).

Arah fleksibel

Arah penempatan blok dikendalikan oleh properti flex-direction.

Nilai yang mungkin:

baris - baris (nilai default); baris-terbalik - baris dengan elemen dalam urutan terbalik; kolom - kolom; kolom-terbalik - kolom dengan elemen dalam urutan terbalik.

baris dan baris-terbalik

kolom dan kolom-terbalik

Bungkus fleksibel

Satu baris dapat memiliki banyak blok. Apakah mereka membungkus atau tidak ditentukan oleh properti flex-wrap.

Nilai yang mungkin:

nowrap - blok tidak dibungkus (nilai default); bungkus - blok dibungkus; wrap-reverse - blok dibungkus dan ditempatkan dalam urutan terbalik.

Untuk mempersingkat properti flex-direction dan flex-wrap, ada properti: flex-flow .

Nilai yang memungkinkan: Anda dapat mengatur kedua properti atau hanya satu. Sebagai contoh:

aliran fleksibel: kolom; flex-flow: wrap-reverse; flex-flow: bungkus kolom-terbalik;

Demo untuk baris-terbalik wrap-reverse:

memesan

Properti pesanan digunakan untuk mengontrol urutan blok.

Nilai yang mungkin: angka. Untuk menempatkan blok terlebih dahulu, berikan perintah: -1:

membenarkan-konten

Ada beberapa properti untuk menyelaraskan item: justify-content , align-items dan align-self .

justify-content dan align-items diterapkan ke wadah induk, align-self ke anak-anak.

justify-content bertanggung jawab atas perataan sumbu utama.

Kemungkinan nilai untuk justify-content:

flex-start - item disejajarkan dari awal sumbu utama (nilai default); flex-end - elemen disejajarkan dari ujung sumbu utama; tengah - elemen disejajarkan dengan pusat sumbu utama; ruang-antara - elemen disejajarkan di sepanjang sumbu utama, mendistribusikan ruang kosong di antara mereka sendiri; space-around - elemen disejajarkan di sepanjang sumbu utama, mendistribusikan ruang kosong di sekitarnya.

mulai fleksibel dan akhir fleksibel

ruang-antara, ruang-sekitar

Sejajarkan item

align-item bertanggung jawab untuk penyelarasan di sepanjang sumbu tegak lurus.

Kemungkinan nilai untuk align-item:

flex-start - elemen disejajarkan dari awal sumbu tegak lurus; flex-end - elemen disejajarkan dari ujung sumbu tegak lurus; pusat - elemen dipusatkan; baseline - elemen disejajarkan di sepanjang garis dasar; peregangan - elemen diregangkan untuk mengambil semua ruang di sepanjang sumbu tegak lurus (nilai default).

mulai fleksibel, akhir fleksibel

dasar, peregangan

Sejajarkan diri

align-self juga bertanggung jawab untuk menyelaraskan sepanjang sumbu tegak lurus, tetapi diatur pada item fleksibel individu.

Kemungkinan nilai untuk align-self:

otomatis adalah nilai default. Menunjukkan bahwa elemen menggunakan align-item elemen induk; flex-start - elemen disejajarkan dari awal sumbu tegak lurus; flex-end - elemen disejajarkan dari ujung sumbu tegak lurus; center - elemen berada di tengah; baseline - elemen disejajarkan dengan baseline; peregangan - elemen diregangkan, mengambil semua ruang tingginya.

Sejajarkan konten

Untuk mengontrol perataan di dalam wadah fleksibel multiline, ada properti align-content.

Nilai yang mungkin:

flex-start - item disejajarkan dari awal sumbu utama; flex-end - elemen disejajarkan dari ujung sumbu utama; tengah - elemen disejajarkan dengan pusat sumbu utama; ruang-antara - elemen disejajarkan di sepanjang sumbu utama, mendistribusikan ruang kosong di antara mereka sendiri; space-around - elemen disejajarkan di sepanjang sumbu utama, mendistribusikan ruang kosong di sekitarnya; peregangan - elemen diregangkan untuk mengisi seluruh ketinggian (nilai default).

mulai fleksibel, akhir fleksibel

tengah, regangkan

ruang-antara, ruang-sekitar

PS: Beberapa hal yang tidak pernah berhasil saya lihat dalam tindakan, misalnya, baris flex-flow: column wrap atau catatan lengkap dari flex-direction: column; bungkus-fleksibel: bungkus; .

Elemen ditumpuk tetapi tidak dibungkus:

Bungkus tidak berfungsi dengan arah-fleksibel: kolom; , meskipun secara spek terlihat seperti ini:

Saya pikir itu akan berhasil seiring waktu.

UPD dari 21/06/2014: Semuanya berfungsi jika Anda memberi ketinggian pada balok. Terima kasih atas tipnya