Saya terus menerbitkan artikel oleh Rachel Andrew tentang fitur teknologi CSS Flexbox
Artikel sebelumnya dalam seri:
- Apa yang terjadi ketika membuat wadah Flexbox .
- Semua yang perlu Anda ketahui tentang perataan di Flexbox .
- Flexbox: seberapa besar kotak fleksibel ini? .
Kami berada di akhir seri Flexbox saya di sini di Smashing Magazine . Dalam posting ini, saya akan meluangkan waktu untuk berpikir tentang apa opsi untuk menggunakan Flexbox sebenarnya, mengingat bahwa kita sekarang memiliki Layout Grid CSS , saya akan memberikan beberapa saran tentang apa yang dapat Anda gunakan kapan dan bagaimana.
Sebelumnya di seri ini
Jika Anda belum memilih artikel lain, ini pada dasarnya adalah posting terakhir, jadi periksa dulu. Saya mulai dengan menjelaskan apa yang terjadi ketika wadah fleksibel dibuat . Pada artikel kedua dalam seri ini, saya melihat penyelarasan dan bagaimana kita menyelaraskan elemen di sepanjang sumbu utama dan transversal dalam flexbox . Pada artikel ketiga, saya membongkar bagaimana mengubah ukuran bekerja di Flexbox , dan bagaimana browser menentukan seberapa besar flex seharusnya. Sekarang kita tahu persis bagaimana Flexbox bekerja, kita dapat berbalik untuk memikirkan kasus penggunaan yang ini adalah yang terbaik.
Haruskah saya menggunakan Grid atau Flexbox?
Ini masih merupakan pertanyaan utama yang saya tanyakan ketika berlatih tata letak, dan secara umum saya percaya bahwa ketika orang-orang menjadi semakin terbiasa bekerja dengan metode baru, ini menjadi pertanyaan yang lebih jarang Anda tanyakan pada diri sendiri. Saat pengalaman bertambah, Anda akan memahami metode tata letak mana yang digunakan.
Namun, jika Anda baru mulai memahami pemikiran ini, ingatlah bahwa Layout Kotak CSS dan Flexbox keduanya adalah CSS. Jika Anda menentukan display: grid atau display: flex , Anda sering menggunakan lebih banyak kesamaan daripada perbedaan. Baik Grid maupun Flexbox menggunakan properti yang merupakan bagian dari spesifikasi Alignment Box ; keduanya didasarkan pada konsep-konsep yang dirinci dalam spesifikasi CSS Penentuan Ukuran Intrinsik dan Ekstrinsik. .
Bertanya apakah desain Anda harus menggunakan Grid atau Flexbox seperti bertanya apakah desain Anda harus menggunakan ukuran atau warna font. Anda mungkin harus menggunakan keduanya jika diperlukan. Dan tidak ada yang akan mengejar Anda jika Anda menggunakan yang salah.
Jadi, kami tidak memilih antara Vue.js dan Bereaksi , Bootstrap atau Yayasan . Kami menggunakan CSS untuk menyelesaikan tata letak, dan kami perlu menggunakan partikel CSS yang paling masuk akal untuk bagian spesifik dari desain kami yang sedang kami kerjakan. Tinjau setiap komponen dan tentukan yang terbaik untuknya, atau kombinasi elemen mana yang terbaik untuknya.
Itu bisa berupa Grid , atau bisa juga berupa Flexbox . Ini bisa menjadi wadah Grid eksternal di mana beberapa elemen grid menjadi fleksibel atau reversibel. Tidak ada masalah bersarang elemen fleksibel jika diperlukan untuk proyek Anda.
Apa itu Flexbox sebenarnya?
Spesifikasi Flexbox menjelaskan metode tata letak sebagai berikut:
" Tata letak fleksibel terlihat mirip dengan tata letak blok . Tidak memiliki banyak teks yang lebih kompleks atau properti berorientasi dokumen yang dapat digunakan dalam tata letak blok, seperti pelampung dan kolom . Sebaliknya, ia menerima alat sederhana dan kuat untuk alokasi ruang dan perataan konten dengan cara, aplikasi web dan halaman web kompleks mana yang sudah lama dibutuhkan. "
Saya pikir frasa kunci di sini adalah "alokasi ruang dan penyelarasan konten". Flexbox adalah tentang mengambil banyak item (yang memiliki ukuran berbeda) dan meletakkannya dalam sebuah wadah (yang itu sendiri bisa berukuran variabel). Flexbox lunak. Dia mencoba membuat tata letak terbaik untuk elemen kami, memberi elemen lebih besar lebih banyak ruang dan elemen lebih kecil lebih sedikit ruang, dengan demikian menjaga keterbacaan konten.
Jika orang menemukan Flexbox kompleks dan samar, ini sering karena mereka mencoba menggunakan Flexbox sebagai sistem grid , mencoba untuk mendapatkan kembali kendali atas ukuran dan distribusi ruang. Ketika Anda melakukan ini, Flexbox mungkin tampak aneh dan rumit, saat Anda bergumul dengan apa yang dilakukan Flexbox , mis. dengan fleksibilitas yang melekat.
Oleh karena itu, templat yang sangat cocok untuk tata letak yang fleksibel adalah templat yang kami tidak begitu tertarik untuk memiliki ukuran sempurna untuk setiap elemen. Kami hanya ingin elemen-elemen ini muncul di sebelah satu sama lain.
Ada juga pola di mana Anda ingin memiliki jeda baris, namun Anda tidak memerlukan kisi yang ketat. Jika kita mengambil contoh Grid vs. Flexbox yang asli , di mana kita menggunakan sintaksis auto-fill berulang di grid, dan kemudian wadah flex pembungkus garis, kita akan segera melihat perbedaan antara kedua metode.
Dalam contoh Kotak , elemen kotak disusun dalam baris dan kolom. Ketika jumlah kolom trek berubah (tergantung pada ruang), elemen selalu pergi ke sel kisi yang tersedia berikutnya. Faktanya, tidak ada cara untuk meminta elemen grid mengelilingi trek untuk mengisi skenario aliran-otomatis jika ada sel kosong lainnya.
Dalam contoh fleksibel , elemen yang dihasilkan memisahkan ruang yang tersisa di antara mereka, jadi kami tidak menggunakan perataan horizontal dan vertikal.
Jika kita memiliki basis-fleksibel yang disetel ke otomatis , dan elemen-elemen fleksibel mana pun ditingkatkan, maka sisanya juga akan diberi ruang tambahan sehingga perataan dapat berbeda dari garis ke garis.
Ini adalah contoh yang sangat jelas tentang di mana kami ingin menggunakan Flexbox di Layout Grid . Jika kita ingin elemen dibungkus, tetapi menempati ruang yang mereka butuhkan, baris demi baris. Ini sangat berbeda dari grid. Template seperti ini dapat berupa serangkaian tag (satu atau dua kata yang ingin Anda tampilkan dengan baik sebagai serangkaian elemen) yang mengambil ruang yang Anda butuhkan, daripada dimasukkan dengan kuat ke dalam kisi yang ketat.
Flexbox juga saat ini merupakan cara terbaik untuk memusatkan elemen secara vertikal dan horizontal di dalam sebuah wadah.
Di masa mendatang (jika browser mendukung properti Kotak Alignment di luar tata letak fleksibel), kita dapat melakukan ini tanpa menambahkan tampilan: flex ke wadah. Namun, saat ini, yang perlu Anda lakukan adalah garis CSS tambahan, yang bukan masalah.
Flexbox bekerja sangat baik dengan komponen kecil satu dimensi. Kumpulan bidang formulir, ikon, atau informasi lainnya dapat dengan mudah diatur dan dibiarkan fleksibel tanpa harus dengan hati-hati mengukur setiap elemen.
Anda juga dapat memilih Flexbox dalam skenario di mana konten perlu dibawa ke bagian bawah wadah, mencegahnya muncul. Dalam contoh di bawah ini, saya membuat wadah menjadi wadah fleksibel, menampilkan konten sebagai kolom, dan kemudian membiarkan bagian tengahnya tumbuh, mendorong footer ke bawah komponen.
Selama pengembangan, saya menemukan Flexbox berguna untuk banyak tugas kecil, melakukan penyelarasan dengan benar, dan mendistribusikan ruang antar item. Anda tentu dapat menggunakan wadah mesh satu dimensi untuk beberapa tugas ini, dan jangan khawatir tentang apa yang Anda putuskan untuk dilakukan.
Namun, saya pikir Flexbox akan menjadi yang terbaik dalam situasi di mana Anda perlu menambahkan elemen tambahan yang tidak saya harapkan dalam desain saya. Misalnya, jika saya memiliki komponen navigasi menggunakan Grid , saya akan membuat trek yang cukup untuk semua elemen, karena saya tidak ingin baris baru dibuat jika saya memiliki elemen "terlalu banyak". Dengan flexbox yang cukup lama, saya akan memungkinkan elemen menjadi fleksibel dengan flex-basis 0 (atau otomatis ), maka elemen itu sendiri akan membiarkan pendamping baru masuk ke dalam garis, membebaskan ruang untuknya.
Kapan sebaiknya Anda tidak menggunakan Flexbox?
Kami melihat beberapa pertimbangan yang saya pikir Anda lebih suka Flexbox daripada tata letak Grid , jadi sekarang kita bisa melihat beberapa tempat di mana Flexbox mungkin bukan pilihan terbaik. Kami sudah melihat contoh Flexbox versus kisi kami dengan elemen yang disejajarkan secara horizontal dan vertikal terhadap elemen yang menempati garis ruang demi garis. Dan perbedaan ini adalah hal pertama yang harus dipertimbangkan.
Contoh kisi memiliki tata letak dua dimensi. Layout demi baris dan kolom secara bersamaan.
Contoh Flexbox adalah tata letak satu dimensi. Kami mengemas garis fleksibel, tetapi penempatan di ruang terjadi baris demi baris. Setiap garis pada dasarnya bertindak sebagai wadah fleksibel baru dalam arah Flex.
Karena itu, jika komponen Anda memerlukan tata letak dua dimensi, Anda akan lebih baik menggunakan Grid daripada Flexbox . Tidak masalah apakah itu komponen besar atau kecil. Jika Anda mengambil satu hal dari artikel ini, maka hapus ide dari kepala Anda bahwa untuk beberapa alasan Grid hanya ditujukan untuk tata letak halaman utama, dan Flexbox untuk komponen. Anda dapat memiliki komponen kecil yang memerlukan tata letak dua dimensi, dan struktur halaman utama yang lebih cocok untuk tata letak satu dimensi.
Tempat lain yang bagus di mana Grid dianggap solusi terbaik adalah dengan menggunakan lebar atau atur basis-flex sebagai satuan panjang elemen-flex Anda untuk menyelaraskannya dengan garis elemen-flex lain atau hanya untuk membatasi fleksibilitas dengan cara tertentu. Cukup sering, ini menunjukkan bahwa Anda benar-benar membutuhkan metode tata letak dua dimensi, atau bahwa kontrol dari wadah kotak lebih cocok untuk tata letak Anda.
Sebagai contoh, kita bisa membuat tata letak fleksibel kita lebih mirip Grid , membatasi fleksibilitas elemen kita. Atur flex-grow ke 0 dan hitung ukuran elemen dalam persen, mirip dengan bagaimana kami menentukan ukuran elemen dalam "kisi" mengambang. Jika Anda menemukan diri Anda melakukan ini, saya akan menyarankan bahwa tata letak kotak adalah pendekatan terbaik, karena dirancang untuk jenis tata letak ini.
Dengan semua yang dikatakan, ingatlah bahwa seringkali tidak ada jawaban benar atau salah yang jelas. Terkadang, satu-satunya hal yang dapat Anda lakukan adalah mencoba berbagai metode dan melihat mana yang paling cocok untuk komponen tersebut. Ingatlah bahwa Anda juga dapat mengganti metode tata letak menggunakan Flexbox di satu breakpoint dan Grid ke yang lain.
Jadi, meringkuk!
Saya harap seri Flexbox ini bermanfaat dan telah mendemonstrasikan bagaimana memahami beberapa algoritma penyelarasan dan kalibrasi untuk item fleksibel menjadikannya lebih mudah.
Jika Anda memiliki pertanyaan yang belum terselesaikan atau memiliki templat yang tampaknya tidak memiliki jawaban yang jelas dalam hal metode tata letak yang digunakan, tinggalkan komentar.