Menu responsif tanpa Javascript. Flexbox untuk Antarmuka: Pola Dasar Membuat Wadah HTML5
Halo semua! Pada awal 2018, menurut situs tersebut Dapatkah saya menggunakan, tata letak di flexbox, 97,8% didukung oleh browser. Ini adalah indikator yang sangat baik untuk teknologi baru yang jauh dari ini untuk tata letak situs web. Sekarang tidak ada alasan mengapa tidak menggunakan metode tata letak yang nyaman ini. Apa yang akan kita lakukan sekarang.
Setelah membuat beberapa tata letak css flexbox-ah, saya tidak lagi ingin kembali menjadi usang mengapung dan bahkan kerangka kerja favorit di antara desainer tata letak seperti Bootstrap. Meskipun, Bootstrap masih terlalu dini untuk menghapusnya, karena dengan menggunakan kisi-kisinya yang terkenal, Anda tidak dapat "mandi" tentang kueri media.
Dalam pelajaran ini, kita akan membuat tata letak tajuk situs dengan tipikal menu adaptif menggunakan flexbox css metode.
Header terdiri dari tiga blok logis:
- Blok berlogo
- Blokir dengan menu yang dibuat pada daftar
- Blokir dengan ikon dan nomor telepon
Ketiga blok ini akan ditempatkan di pembungkus blok luar yang umum tajuk, yang di dalamnya sendiri akan dilakukan tampilan: fleksibel; untuk tiga blok.
Di dalam blok nav, tulis lagi tampilan: fleksibel; untuk item menu. Dengan cara ini, kami akan mencapai fleksibilitas, sambil mengurangi ukuran layar, item menu dapat berbaris satu sama lain.
Untuk demonstrasi visual, kami akan melakukan semuanya HTML markup tajuk situs.
+380973457685
Beginilah tampilan tajuk tanpa menerapkan gaya, sebagaimana mestinya.
Dan sekarang perhatian! Cukup menentukan dua blok tampilan: fleksibel; dan semua isi header akan direntangkan menjadi satu baris.
tajuk (
tampilan: fleksibel;
}
Tajuk .menu ul(
tampilan: fleksibel;
}
Begini Cara kerjanya flexbox.
*{margin: 0;
bantalan: 0;
}
Tubuh(
warna latar belakang: #fff;
font-family: "Buka Sans", sans serif;
garis-tinggi: 1,5;
}
tajuk (
perbatasan: 2px solid #ccc;
tampilan: fleksibel;
flex-wrap: bungkus; /*jeda baris */
justify-content: space-between; /* mendorong konten ke tepi */
menyelaraskan-item: tengah; /*meluruskan elemen secara vertikal */
}
tajuk.logo(
padding-kiri: 30px
}
Tajuk .menu ul(
tampilan: fleksibel;
daftar-gaya: tidak ada;
}
Header .menu ul li (
margin: 20px 10px;
}
Header .menu ul a (
transformasi teks: huruf besar;
dekorasi teks: tidak ada;
font-berat: tebal;
warna: #06a327;
}
telepon (
ukuran font: 110%
warna: #333;
padding-kanan: 40px;
}
Kami sedang mengerjakan penyesuaian tajuk
Inti dari proses adaptasi situs adalah menemukan titik kontrol di mana elemen situs tidak akan terlihat atau terlihat ceroboh. Tugas kita, saat mengecilkan lebar browser, adalah melihat masalahnya dan memperbaikinya dengan menambahkan kode yang sesuai (kueri media) ke file gaya.
Misalnya, pada layar selebar 900 piksel, blok dengan ponsel ditekan ke tepi kiri tajuk.
Dalam rilis ini, kami akan efek menu horizontal di hover. Mari terhubung dengan ikon font, aktifkan mode pencampuran lapisan dengan mix-blend-mode: multiply , gunakan :hover pseudo-classes, dan kenali desplay:flax , semuanya dilakukan dalam CSS3 murni.
Bingkai menu dalam HTML
Unduh arsip ke komputer Anda dan unzip. Ini berisi tiga folder, css tempat file gaya berada, font adalah folder dengan ikon, img di dalamnya adalah gambar latar belakang.
Transfer semuanya ke lingkungan pengembangan tempat Anda bekerja. Saya akan menulis semua kode di phpstorm . Saya menyalin semua folder dan file ke dalamnya, membuka index.html dan melanjutkan untuk mendeskripsikan bingkai menu.
Tulis tag tubuh
Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-
Nama ikon:
- kereta Belanja
- server
- folder terbuka
- koran-o
Menata CSS
Setelah kami selesai menandai, kami akan beralih ke gaya. Buka style.css di body dan atur background dan font Verdana.
Body( background-image: url("../img/escheresque_ste.png"); font-family: Verdana; )
Kami mengatur latar belakang blok dengan menu, membuat lekukan 100 puncak dari atas. dan lebar layar penuh.
Dws-menu( warna latar belakang: putih; margin atas: 100px; lebar: 100%; )
Di blok Ul, kami menyusun daftar secara horizontal dengan desplay:flax , menghapus padding, dan memusatkan elemen kami dengan justify-content:center .
Ul.dws-ul( display: flex; padding: 0; justify-content: center; )
Kami menghapus penanda dari daftar LI dan membuat indentasi dari semua sisi sebanyak 10 sekop.
Li.dws-li ( gaya daftar: tidak ada; padding: 10px; )
Kami menghapus garis bawah dari tautan, menambah teks menjadi 18 puncak. dan membuatnya hitam.
Li.dws-li a( dekorasi teks: tidak ada; ukuran font: 18px; warna: #000; )
Pindahkan ikon sedikit ke kanan dengan margin-right:10px .
Li.dws-li ai( margin-right: 10px; )
Animasi saat melayang
Setelah kita menyelesaikan desain dasar, mari kita mulai menganimasikan saat melayang.
Mari buat elemen semu tambahan yang akan menggarisbawahi nama elemen saat melayang.
Mari kita gambarkan sisi kiri, pilih tautan dan beri mereka elemen semu li.dws-li a::before , tulis konten kosong:''; , lebar 20 foto. dan tinggi 3 sekop. cukup. Mari atur warnanya dan agar blok muncul, tetapkan link position: relative; , dan posisikan benar-benar ke tautan, pindahkan ke paling bawah, tekan ke tepi kiri.
li.dws-li a( ... posisi: relatif; ) li.dws-li a::sebelum( ... posisi: absolut; atas: 100%; kiri: 0; )
Gandakan blok ini dan tetapkan elemen pseudo ::after ke dalamnya. Ubah parameter dari kiri ke kanan , pilih warna lain #ff2117 .
Li.dws-li a::setelah( konten: ""; lebar: 20px; tinggi: 3px; warna latar: #ff2117; posisi: absolut; atas: 100%; kanan: 0; )
Lalu kita membuat animasi di hover. Pilih li dan beri mereka latar belakang yang sedikit lebih gelap.
Li.dws-li:hover( background-color: #e5eae8; )
Untuk melakukan ini, kami memilih daftar di hover dan menambahkan elemen pseudo ke dalamnya dengan lebar 50% dan mengatur transformasi sepanjang sumbu X dari kiri ke kanan. Ini akan memberinya gerakan.
Li.dws-li:hover a:before( width: 50%; transform: translateX(100%); )
Kami mengulangi hal yang sama untuk ::after pseudo-element, hanya sekarang kami mengatur gerakan dari kanan ke kiri.
Li.dws-li:hover a:after( width: 50%; transform: translateX(-100%); )
li.dws-li a::before( ... transisi: .5s; mix-blend-mode: multiply; ) li.dws-li a::after( ... transisi: .5s; mix-blend-mode : kalikan; )
Ternyata cukup bagus, sekarang mari kita atur lebarnya menjadi nol dan tambahkan warna merah saat mengarahkan tautan.
Li.dws-li a:hover( warna: #e62117; )
li.dws-li a( ... padding: 5px; ) li.dws-li a::before( ... top: 90%; ) li.dws-li a::after( ... top: 90 %; )
Pada prinsipnya, saya menunjukkan kepada Anda apa yang saya inginkan, ternyata menunya cukup bagus.
Pelajaran disiapkan oleh Gorelov Denis.
Hari-hari tata letak halaman berdasarkan elemen mengambang dan memanipulasi margin hampir menjadi masa lalu. CSS memberi pengembang properti baru dan lebih baik untuk membuat tata letak. Hal-hal tata letak tradisional seperti penyelarasan vertikal, jarak yang seragam antar elemen, mengubah susunan elemen tanpa mengubah urutannya di markup, dan pola lain seperti "lem kaki" mudah diimplementasikan menggunakan flexbox.
Pada artikel ini, kita akan melihat pola layout yang cocok untuk diimplementasikan pada flexbox. Sebagai contoh, kami akan menggunakan antarmuka aplikasi Tracks, yang menerapkan prinsip desain atom. Saya akan berbicara tentang situasi di mana flexbox datang untuk menyelamatkan dan menyebutkan kesulitan memasangkannya dengan pola tata letak tertentu. Kita akan melihat pola yang menyebabkan masalah, menyarankan fallback untuk menyelesaikan masalah, dan taktik tambahan untuk mulai menggunakan fitur ini sekarang.
Komponen Atom Fleksibel
Antarmuka Tracks mengimplementasikan pendekatan yang mempertimbangkan setiap fragmen secara terpisah berdasarkan prinsip-prinsip Brad Frost.
Filosofi desain atomik dapat dilihat sebagai persamaan dari blok LEGO untuk desain web. Istilah ilmiah seperti organisme, molekul, atom digunakan untuk memberi pengembang klasifikasi elemen antarmuka dan, karenanya, pemahaman yang lebih dalam tentang setiap fragmen sebagai bagian dari keseluruhan. Cara pengkategorian ini memungkinkan untuk mengidentifikasi pola-pola ini dan mencegah faktor-faktor eksternal seperti kisi-kisi, warna, dan jarak memengaruhi proses ini. Membangun antarmuka dari tingkat mikro memungkinkan penggunaan kembali elemen mikro dasarnya secara lebih luas.
Gambar 1: Elemen aplikasi ini digunakan untuk menampilkan data berdasarkan prinsip desain atom. Bisakah Anda menebak mana yang menggunakan Flexbox? (versi diperbesar)
Gambar 2. Antarmuka utama aplikasi Tracks, memanfaatkan desain flexbox dan atomik. (versi diperbesar)
Desain antarmuka telah dirujuk sebagai sekumpulan prototipe ke InVision, dengan dokumentasi aliran dan antarmuka pengguna. Selama audit awal antarmuka, saya mulai mengidentifikasi area yang masuk akal untuk mengimplementasikan flexbox. Saya juga memutuskan untuk menggunakan flexbox untuk tata letak halaman, menggunakan pola tradisional "sidebar di sebelah kiri, konten utama di sebelah kanan", biasanya diterapkan pada blok mengambang.
html.flexbox ul.flexbox-target, html.no-js ul.flexbox-target ( display: flex; flex-direction: baris; ) html.no-flexbox ul.flexbox-target li, html.no-js ul. flexbox-target li ( display: inline-block; /* Bisa juga menggunakan sistem float-positioned-layout */ )
Jika tidak ada dukungan flexbox, kami akan menggunakan display: inline-block . Untuk deklarasi yang sama, kami akan menambahkan kelas no-js, jika JavaScript dinonaktifkan di browser. Kaskade CSS akan berfungsi meskipun tidak ada kotak fleksibel atau JavaScript, dan juga saat ada masalah saat memuat. Flexbox dapat berdampingan dengan float , display: table dan position: relative ; browser yang mendukung flexbox akan menggunakannya terlebih dahulu, sedangkan browser yang tidak mendukungnya akan terbatas pada mekanisme tata letak CSS tradisional.
Seperti biasa, pilihan akhir teknologi akan bergantung pada tujuan proyek, anggaran, dan data analitiknya. Aturan utama saya adalah selalu memilih opsi paling cerdas untuk sebuah proyek.
Pola garis
Komponen navigasi telah terbukti sangat cocok untuk flexbox, tidak hanya karena kemudahan penerapannya, tetapi juga karena pengurangan jumlah waktu yang dihabiskan. Pola inline terkenal memakan waktu pengembang, tetapi dengan flexbox, ini hanya sekitar beberapa menit. Jika Anda telah menerapkan hal-hal seperti ini sebelum IE9, Anda akan memahami betapa pentingnya hal ini.
Gambar 3. Navigasi panel admin ini menggunakan pola sebaris dengan item navigasi terpusat vertikal. (versi diperbesar)
Markup pola navigasi admin terdiri dari tag nav yang membungkus tautan. Berikut adalah HTML dari pola ini:
Dan gaya yang sesuai:
Nav ( display: flex; align-items: center; /* Pusatkan item navigasi secara vertikal */ ) nav a ( display: inline-block; /* Untuk menghindari masalah tata letak elemen inline dengan properti order di IE 10 */ ) nav a ( fleksibel: 1; )
CSS minimalis seperti markup. Perhatikan set inline-block untuk tautan nav. Deklarasi ini memecahkan kemungkinan masalah di masa mendatang di IE10, jika Anda memutuskan untuk mengubah urutan elemen dengan properti order. Kita juga tahu bahwa semua margin dan padding yang disetel ke keturunan langsung dari wadah fleksibel menyebabkan masalah tata letak di IE10, jadi masuk akal untuk selalu memeriksa tata letak lintas-browser untuk menghindari hal seperti itu.
Gambar 4. Pola navigasi header dengan logo di tengah adalah umum di web dan dapat dengan mudah diadaptasi ke flexbox. (versi diperbesar)
Pola inline tradisional biasanya diimplementasikan menggunakan markup non-semantik, dengan flexbox kita dapat melakukannya tanpa trik seperti itu.
Tata letak terdiri dari kumpulan item menu yang ditempatkan di kiri dan kanan logo di tengah. Markup untuk pola ini adalah sebagai berikut:
Flexbox dapat mengurangi kebutuhan akan peretasan HTML dan memungkinkan semantik dipertahankan seperti yang ditunjukkan dalam markup. Dukungan semantik penting karena HTML ini memiliki peluang tinggi untuk digunakan di masa mendatang; ada banyak alasan lain untuk ini, di luar cakupan diskusi ini.
Sebelum munculnya flexbox, pengembang menggunakan pendekatan display: inline-block dan bahkan float: left untuk mengatur tata letak inline. Sekarang flexbox telah menjadi pilihan yang layak dan pengembang tidak dipaksa untuk menggunakan praktik buruk demi desain yang indah. CSS yang dibutuhkan tidak sesingkat contoh pola sebelumnya pada Gambar 3, tetapi lebih mudah diimplementasikan daripada metode lama.
Pipeline-header ( display: flex; align-items: center; justify-content: space-between; ) .pipeline-header > a ( display: inline-block; /* IE 10 tidak mengenali urutan, jadi kami melakukan ini untuk menghindari tata letak yang aneh di sana. */ ) .pipeline-logo ( flex: 1; order: 2; text-align: center; ) .pipeline-nav ( flex: 1.25; order: 1; ) .pipeline-search ( flex: 1; urutan: 3; ) a ( urutan: 4; )
Saat menggunakan flexbox pada pola pada Gambar 3, ketahuilah bahwa urutan pada markup dapat diubah. Jika logo perlu dipindahkan, ini mudah dilakukan dengan menggunakan properti order. Perlu diingat bahwa urutan markup penting untuk aksesibilitas dan ini kontroversial jika berkaitan dengan flexbox, terutama mengingat penerapan aksesibilitas yang berbeda di seluruh browser. Peramban (kecuali Firefox) dan pembaca layar menggunakan urutan tata letak untuk navigasi keyboard, bukan urutan visual yang dibuat oleh CSS.
Gambar 5. Alur yang direpresentasikan dalam markup dan dirender di browser, melakukan resequencing dengan flexbox tanpa mengubah markup. (versi diperbesar)
Di bawah ini adalah kode untuk tata letak seperti itu. Markup tidak digunakan untuk mengubah urutan elemen ditampilkan.
Di sini CSS digunakan untuk mengubah urutan elemen dalam diagram di sebelah kanan Gambar 5.
Wadah ( display: flex; flex-direction: kolom; /* baris adalah nilai default */ ) header ( order: 2; ) main ( order: 3; ) footer ( order: 1; )
Jenis tata letak ini digunakan untuk lebih dari sekadar navigasi. Anda mungkin pernah melihatnya di footer.
Gambar 6. Pola yang sama yang kami gunakan untuk navigasi digunakan di footer. (versi diperbesar)
Saat menggunakan pola ini, perlu diingat bahwa konten mungkin tidak memiliki cukup ruang di dalam penampung. Haruskah konten menyebar dari tengah ke tepi? Bagaimana ini akan memengaruhi elemen tata letak lainnya? Pikirkan tentang pertanyaan-pertanyaan ini sebelum memulai sebuah proyek. Dan perlu diingat bahwa navigasi keyboard penting bagi pengguna.
Bidang input sebaris
Bentuk bisa menjadi mimpi buruk bagi pengembang, terutama jika digabungkan dengan struktur kisi rumit yang dibuat di Photoshop. Pola "inline label", demikian saya menyebutnya, sama pentingnya bagi industri kami seperti halnya Fender Stratocaster bagi musik rock.
Gambar 7. Label sebaris dan kolom input adalah area lain di mana flexbox digunakan. Tapi hati-hati dengan bagaimana teks label mendorong bidang input tergantung pada jumlah teks. (versi diperbesar)
Seperti disebutkan di bagian sebelumnya, Anda perlu memutuskan bagaimana konten akan menyebar di dalam wadah saat browser diubah ukurannya atau jika ada konten dinamis.
Ilustrasi 8. Putuskan bagaimana konten Anda akan berkembang. Di sebelah kiri adalah display:table dengan perataan vertikal di tengah, di sebelah kanan adalah flexbox dengan perataan di tengah. (versi diperbesar)
Tangkapan layar ini dengan jelas menunjukkan kesalahan flexbox dengan konten dinamis atau besar. Efek pada gambar kanan adalah apa yang saya sebut "push from center", yang artinya konten baru cenderung dari tengah ke tepi.
Berikut adalah markup untuk pola inline label pada Gambar 8.
Solusi untuk masalah tersebut adalah dengan menggunakan display: table; untuk teks panjang. Ini memungkinkan konten mengalir dari atas ke bawah daripada dari tengah ke tepi.
Form-group ( display: flex; ) .form-group label ( display: table; vertical-align: middle; ) .form-group input ( flex: 1; )
Kombinasi flexbox dan display: table adalah teknik hebat yang masuk akal untuk dipelajari lebih lanjut. Namun saat menggunakannya, penting untuk selalu memeriksa tata letak di lingkungan pengujian untuk mendeteksi bug secara tepat waktu.
Ilustrasi 9. Saat menggunakan bidang input dan tombol pada baris yang sama, keseimbangan dalam desain dibuat karena tingginya sama. (versi diperbesar)
Saya telah melihat banyak kolom pencarian diimplementasikan dalam pola ini. Ini adalah pola yang sangat fleksibel yang dapat digunakan kembali di berbagai macam templat. Tentu saja, CSS dapat memperkenalkan universalitas pola di sini melalui penggunaan properti khusus konteks, hal ini harus dihindari.
HTML yang diperlukan khas dan menyertakan div pembungkus untuk struktur flexbox.
Dan inilah gaya-gayanya:
Form-group ( display: flex; ) .form-group input ( flex: 1; )
Menu drop down
Gambar 10. Bagian halaman dengan menu drop-down disorot menggunakan fitur flexbox untuk pemosisian cepat. (versi diperbesar)
Menu tarik-turun terdiri dari kolom di sebelah kiri yang berisi item sebaris yang dipusatkan secara vertikal dan daftar item di sebelah kanan dengan setiap item di barisnya sendiri.
Gambar 11. Menu antarmuka utama dibangun menggunakan layout flexbox. (versi diperbesar)
Markup untuk menu navigasi ini menggunakan HTML berikut sebagai dasarnya.
CSS yang sesuai sederhana dan jelas, persis seperti yang disukai pengembang.
Menu ( display: flex; ) .menu__options ( display: flex; align-items: center; ) .menu__items ( display: flex; flex-direction: column; )
Tata letak yang diperlukan dilakukan dengan beberapa baris kode. Plus, kode ini dipisahkan dari struktur kisi dan markup mempertahankan makna semantik. Ini adalah contoh lain dari kekuatan flexbox untuk menghindari pemosisian yang rumit dan tata letak yang berantakan.
objek media
Gambar 12. Pola objek media menggunakan flexbox, SVG dengan lebar tetap ada di sebelah kiri, dan semua konten flexbox lainnya berdampingan. (versi diperbesar)
Dalam pola universal ini, yang dikenal sebagai objek media, gambar atau video ditempatkan di satu sisi dan konten lainnya berdampingan.
Medi-obj ( display: flex; align-items: flex-start; ) .media-obj__body ( flex: 1; )
Gambar 13. Ini adalah kasus ekstrem untuk mengubah ukuran jendela browser, gambar disetel ke lebar maksimumnya, dan sisi kanan disetel ke kelenturan 1. Berhati-hatilah saat menggabungkan elemen lebar tetap dan kelenturan
Flexbox berfungsi baik dengan pola ini, tetapi hati-hati, konten media dapat berinteraksi dengan konten lain seperti yang ditunjukkan di atas. Dalam contoh, Anda dapat melihat bagaimana ruang grafik runtuh dan teks didorong keluar dari atas. Ini mungkin tampak seperti contoh yang bodoh, karena siapa yang akan membuat browser mereka begitu sempit? Tapi bukan itu intinya - kita hanya perlu memahami bagaimana konten berhubungan dengan lingkungannya sebelum menggunakan flexbox.
Solusi untuk pola ini adalah menyetel gambar ke lebar maksimum: 100% untuk media di dalam flexbox, atau menggunakan lebar gambar tetap dan kueri media untuk menyesuaikannya sesuai kebutuhan.
Kalender Flexbox
Kalender adalah salah satu widget yang paling umum. Mengapa tidak menggunakan tabel, Anda bertanya? Dalam kasus kami, kalender digunakan untuk memilih tanggal saja, jadi saya memutuskan untuk menggunakan tombol untuk hari, bulan, dan tahun, dan membatasi tombol ini ke bingkai baris (setiap baris kalender untuk minggu ini dibungkus dalam div terpisah) . Menggunakan pendekatan ini memungkinkan Anda mengurangi jumlah markup dan membuatnya lebih mudah untuk membuat tata letak (terima kasih banyak kepada
Singkatnya, tata letak dengan Flexbox memberi kami solusi sederhana untuk tugas yang dulu sulit. Misalnya, saat Anda perlu menyelaraskan elemen secara vertikal, atau mendorong footer ke bagian bawah layar, atau cukup memasukkan beberapa blok dalam satu baris sehingga memenuhi semua ruang kosong. Tugas serupa diselesaikan tanpa kelenturan. Tapi sebagai aturan, solusi ini lebih seperti "kruk" - trik menggunakan css untuk tujuan lain. Sedangkan dengan flexbox, tugas-tugas tersebut 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 kerugian 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 aturan, bekerja di tempat yang tidak terduga, di mana hasilnya tidak diperiksa - logika adalah segalanya bagi kami!
Flexbox memungkinkan Anda untuk secara elegan mengontrol berbagai macam parameter untuk elemen di dalam wadah: arah, urutan, lebar, tinggi, perataan sepanjang dan melintang, distribusi ruang kosong, elemen peregangan dan penyusutan.
Pengetahuan dasar
FlexBox terdiri dari Wadah dan Elemen Anak (item) (item fleksibel).
Untuk mengaktifkan flexbox, setiap elemen HTML hanya perlu menyetel properti css ke display:flex; atau tampilkan: inline-flex; .
Setelah mengaktifkan properti flex, dua sumbu dibuat di dalam container: main dan transversal (tegak lurus (⊥), sumbu silang). Semua elemen bersarang (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 tingginya tidak lagi sesuai, 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 memengaruhi sesuatu. Sumbu di sini hanyalah arah pergerakan elemen di dalam wadah. Misalnya, jika kita menentukan perataan elemen ke tengah 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 lain dari Flexbox adalah adanya baris dalam arah melintang. Untuk memahami apa yang kita bicarakan, bayangkan ada sumbu horizontal utama, banyak elemen dan elemen tersebut tidak "naik" ke dalam wadah, sehingga berpindah ke baris lain. Itu. wadahnya seperti ini: sebuah 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 terlihat jelas pada contoh untuk file . Dan inilah 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
menampilkan:Mengaktifkan properti flex untuk elemen. Elemen itu sendiri dan elemen yang bersarang di dalamnya berada di bawah properti ini: hanya keturunan dari level pertama yang terpengaruh - mereka akan menjadi elemen wadah fleksibel.
- melenturkan- elemen membentang hingga lebar penuh dan memiliki ruang penuh di antara balok-balok di sekitarnya. Ada jeda baris di awal dan di akhir blok.
- inline-flex- elemen dibungkus oleh elemen lain. Pada saat yang sama, bagian dalamnya 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 .
arah fleksibel:Mengubah arah sumbu utama wadah. Sumbu melintang 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 di dalam wadah.
- nowrap (default)- elemen bersarang disusun dalam satu baris (dengan arah=baris) atau dalam satu kolom (dengan arah=kolom) terlepas dari apakah ditempatkan dalam wadah atau tidak.
- membungkus- termasuk pemindahan elemen ke baris berikutnya jika tidak sesuai dengan wadah. Ini memungkinkan pergerakan elemen di sepanjang sumbu melintang.
- bungkus terbalik- sama dengan wrap hanya transfernya tidak akan turun, tapi naik (berlawanan arah).
Menggabungkan properti flex-direction dan flex-wrap. Mereka sering digunakan bersama, sehingga properti flex-flow dibuat untuk menulis lebih sedikit kode.
flex-flow mengambil nilai dari kedua properti ini yang dipisahkan oleh spasi. Atau Anda dapat menentukan satu nilai untuk properti apa pun.
/* flex-direction saja */ flex-flow: baris; flex-flow: baris-mundur; aliran fleksibel: kolom; flex-flow: kolom-mundur; /* flex-wrap only */ flex-flow: nowrap; aliran fleksibel: bungkus; aliran fleksibel: bungkus-balik; /* kedua nilai sekaligus: flex-direction dan flex-wrap */ flex-flow: baris nowrap; aliran fleksibel: bungkus kolom; flex-flow: kolom-balik bungkus-balik; 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 dimulai dari awal (mungkin ada ruang di akhir).
- ujung lentur- elemen disejajarkan di bagian akhir (tempatnya akan tetap di awal)
- tengah- di tengah (tempatnya akan tetap di kiri dan kanan)
- ruang antara- elemen ekstrem ditekan ke tepi (ruang antar elemen didistribusikan secara merata)
- ruang sekitar- ruang kosong didistribusikan secara merata di antara elemen (elemen ekstrem tidak ditekan ke tepi). Ruang antara tepi wadah dan elemen terluar akan menjadi setengah jarak antara elemen di tengah baris.
- ruang-merata
Meratakan baris yang berisi elemen di sepanjang sumbu melintang. Sama seperti justify-content tetapi untuk sumbu yang berlawanan.
Catatan: Berfungsi jika 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 dengan kaku dan harus lebih besar dari tinggi baris, jika tidak, baris itu sendiri akan meregangkan wadah dan penyelarasannya kehilangan artinya, 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 lentur- baris dikelompokkan di bagian bawah wadah (tempat akan tetap di awal)
- tengah- baris dikelompokkan di tengah wadah (tempatnya akan tetap di tepi)
- ruang antara- baris ekstrim ditekan ke tepi (ruang antar baris didistribusikan secara merata)
- ruang sekitar- ruang kosong didistribusikan secara merata di antara baris (elemen ekstrem tidak ditekan ke tepi). Ruang antara tepi wadah dan elemen terluar akan menjadi setengah jarak antara elemen di tengah baris.
- ruang-merata- sama dengan space-around , hanya jarak elemen ekstrim ke tepi wadah sama dengan jarak antar elemen.
Sejajarkan elemen di sepanjang sumbu melintang dalam satu baris (baris tak terlihat). Itu. barisnya sendiri disejajarkan melalui align-content , dan elemen di dalam baris (baris) ini melalui align-items dan semua ini di sepanjang sumbu melintang. Tidak ada pemisahan seperti itu di sepanjang sumbu utama, tidak ada konsep baris dan elemen yang disejajarkan menggunakan justify-content .
- peregangan (default)- elemen direntangkan untuk mengisi garis sepenuhnya
- mulai fleksibel- elemen ditekan ke awal baris
- ujung lentur- elemen ditekan ke akhir baris
- tengah- elemen disejajarkan di tengah baris
- garis dasar- elemen disejajarkan dengan garis dasar teks
Untuk elemen kontainer
fleksibel-tumbuh:Menentukan faktor untuk meningkatkan elemen saat ada ruang kosong di wadah. Pertumbuhan fleksibel default: 0 mis. tidak ada elemen yang tumbuh dan mengisi ruang kosong di dalam wadah.
Pertumbuhan fleksibel default: 0
- Jika Anda menentukan flex-grow:1 untuk semua elemen, maka semuanya meregang dengan cara yang sama dan mengisi semua ruang kosong dalam wadah.
- Jika Anda menentukan flex-grow:1 untuk salah satu elemen, maka itu akan mengisi semua ruang kosong dalam wadah dan penyelarasan melalui justify-content tidak akan berfungsi lagi: tidak ada ruang kosong untuk menyelaraskan...
- Dengan pertumbuhan fleksibel:1 . Jika salah satu dari mereka memiliki flex-grow:2 maka itu akan menjadi 2x lebih besar dari yang lainnya
- Jika semua kotak fleksibel di dalam wadah fleksibel memiliki flex-grow:3 , maka ukurannya akan sama
- Dengan pertumbuhan fleksibel:3 . Jika salah satu dari mereka memiliki flex-grow:12 maka itu akan menjadi 4 kali lebih besar dari yang lainnya
Bagaimana itu bekerja? Katakanlah wadah memiliki lebar 500px dan berisi dua elemen, masing-masing dengan lebar dasar 100px. Jadi masih tersisa 300 piksel bebas di wadah. Sekarang, jika kita menyetel elemen pertama ke flex-grow:2; , dan pertumbuhan fleksibel kedua: 1; , maka blok akan menempati seluruh lebar wadah yang tersedia dan lebar blok pertama adalah 300px, dan lebar blok kedua adalah 200px. Hal ini dijelaskan oleh fakta bahwa ruang kosong 300px yang tersedia dalam penampung didistribusikan di antara 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
menyusut-fleksibel: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.
Penyusutan fleksibel default:1
Katakanlah wadah memiliki lebar 600px dan berisi dua elemen, masing-masing selebar 300px - flex-basis:300px; . Itu. dua elemen mengisi wadah sepenuhnya. Mari tentukan flex-shrink: 2 untuk elemen pertama; , dan flex-shrink kedua: 1; . Sekarang mari kurangi lebar wadah sebesar 300px, mis. elemen harus menyusut sebesar 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
dasar fleksibel:Menetapkan 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 dari flex-grow, flex-shrink dan konten di dalam blok. Dengan auto , elemen mendapatkan lebar basis relatif terhadap konten di dalamnya.
Bawaan: otomatis
Terkadang lebih baik untuk meng-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 saat elemen diregangkan oleh konten di dalamnya, lebih dari yang ditentukan dalam basis fleksibel. Contoh.
flex-basis akan menjadi "keras" jika stretch dan shrink diatur ke nol: flex-basis:200px; pertumbuhan fleksibel:0; susut-fleksibel:0; . Semua ini dapat ditulis sebagai flex:0 0 200px; .
flex: (berdasarkan pertumbuhan menyusut)Tiga singkatan properti: flex-grow flex-shrink flex-basis .
Default: fleksibel: 0 1 otomatis
Namun, Anda dapat menentukan satu atau dua nilai:
Lentur: tidak ada; /* 0 0 otomatis */ /* angka */ flex: 2; /* flex-grow (flex-basis menjadi 0) */ /* bukan angka */ flex: 10em; /* basis fleksibel: 10em */ fleksibel: 30px; /* basis fleksibel: 30px */ fleksibel: otomatis; /* basis fleksibel: otomatis */ fleksibel: konten; /* basis fleksibel: konten */ fleksibel: 1 30px; /* flex-grow dan flex-basis */ flex: 2 2; /* flex-grow dan flex-shrink (flex-basis 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 align-items wadah
- menggeliat- elemen direntangkan untuk mengisi garis sepenuhnya
- mulai fleksibel- elemen ditekan ke awal baris
- ujung lentur- elemen ditekan ke ujung 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: urutan: 0
Secara default, elemen memiliki urutan: 0 dan ditempatkan sesuai 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, lalu elemen dengan 1.
Jadi Anda bisa, misalnya, melempar elemen pertama ke akhir, tanpa mengubah arah pergerakan elemen atau kode HTML yang tersisa.
Catatan
Bagaimana basis fleksibel berbeda dari lebar?
Di bawah ini adalah perbedaan penting antara basis fleksibel dan lebar/tinggi:
- Saat menggunakan properti flex 3, nilai (flex-grow/flex-shrink/flex-basis) dapat digabungkan dan ditulis pendek, sedangkan untuk width grow atau shrink harus ditulis terpisah. Misalnya: fleksibel:0 0 50% == lebar:50%; susut-fleksibel:0; . Terkadang itu tidak nyaman.
flex-basis hanya berfungsi untuk sumbu utama. Artinya 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 wadah, properti ini tidak akan berpengaruh.
Elemen wadah absolut tidak berpartisipasi dalam konstruksi fleksibel... Ini berarti bahwa basis-fleksibel tidak memengaruhi elemen wadah fleksibel jika absolut position:absolute . Mereka perlu menentukan lebar/tinggi.
Jika memungkinkan, tetap pilih flex-basis . Hanya gunakan lebar saat 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 menyetel width melalui width atau max-width daripada flex-basis , maka elemen di dalam wadah fleksibel akan dapat keluar dari wadah 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 blok 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 memilih elemen secara sewenang-wenang setelah itu akan ada celah, Anda perlu menggunakan properti margin-left:auto atau margin-right:auto .
Menu Responsif #2 di flex
Mari buat menu di bagian paling atas halaman. Di layar lebar, itu harus di sebelah kanan. Rata-rata, sejajarkan di tengah. Dan 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 bila 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".
#5 Galeri pada flex dan transisi
Contoh ini menunjukkan seberapa cepat Anda dapat membuat akordeon cantik dengan gambar di flex. Perhatikan properti transisi untuk flex.
#6 Lentur ke Lentur (hanya sebuah contoh)
Tugasnya adalah membuat blok yang fleksibel. Sehingga awal teks pada setiap blok berada pada garis yang sama secara horizontal. Itu. saat lebarnya menyempit, balok-balok itu bertambah tinggi. Saya membutuhkan gambar di atas, tombol selalu di bawah, dan teks di tengah untuk memulai pada satu garis horizontal...
Untuk mengatasi masalah ini, balok itu sendiri diregangkan dengan kelenturan 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 ...
Lebih banyak contoh
Dukungan browser - 98,3%
Tentu saja, tidak ada dukungan penuh, tetapi semua browser modern mendukung konstruksi flexbox. Beberapa masih membutuhkan awalan. Untuk gambaran nyata, mari kita lihat caniuse.com dan lihat bahwa 96,3% 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 prefiks mana yang relevan hari ini (Juni 2019), saya akan memberikan contoh semua aturan fleksibel dengan awalan yang diperlukan:
/* Container */ .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: bungkus kolom; flex-flow: bungkus kolom; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: distribusikan; align-content:space-around; ) /* Item */ .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 :pusat; menyelaraskan diri:pusat; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )
Lebih baik jika properti dengan awalan digunakan sebelum properti aslinya.
Tidak ada awalan yang tidak perlu untuk hari ini (menurut caniuse) dalam daftar ini, tetapi secara umum ada lebih banyak awalan.
Chrome | safari | Firefox | Opera | YAITU | Android | iOS |
---|---|---|---|---|---|---|
20- (lama) | 3.1+ (lama) | 2-21 (lama) | 10 (tweener) | 2.1+ (lama) | 3.2+ (lama) | |
21+ (baru) | 6.1+ (baru) | 22+ (baru) | 12.1+ (baru) | 11+ (baru) | 4.4+ (baru) | 7.1+ (baru) |
- (baru) - sintaks baru: display: flex; .
- (tweener) - sintaks tidak resmi 2011 lama: display: flexbox; .
- (lama) - sintaks 2009 lama: tampilan: kotak;
Video
Nah, jangan lupakan videonya, terkadang juga menarik dan bisa dimengerti. Berikut adalah beberapa yang populer:
Tautan Fleksibel yang Berguna
flexboxfroggy.com - game pembelajaran flexbox.
Flexplorer adalah konstruktor kode fleksibel visual.