Diumumkan di HN: Playground untuk Mengatasi Kesulitan CSS Flexbox

• Alat untuk bereksperimen dengan berbagai properti flex dan memahami dampaknya pada tata letak

• Perubahan dapat dilihat secara real-time, dan Anda dapat menyalin kode CSS yang dihasilkan

• flex-direction

  • row: Menempatkan elemen secara horizontal
  • column: Menempatkan elemen secara vertikal
  • row-reverse: Menempatkan elemen dalam urutan terbalik secara horizontal
  • column-reverse: Menempatkan elemen dalam urutan terbalik secara vertikal

• justify-content

  • flex-start: Menyelaraskan elemen ke awal
  • center: Menyelaraskan elemen ke tengah
  • flex-end: Menyelaraskan elemen ke akhir
  • space-between: Memberikan jarak merata di antara elemen
  • space-around: Memberikan jarak merata di sekitar elemen

• align-items

  • stretch: Meregangkan elemen untuk menyesuaikan
  • flex-start: Menyelaraskan elemen ke awal
  • center: Menyelaraskan elemen ke tengah
  • flex-end: Menyelaraskan elemen ke akhir
  • baseline: Menyelaraskan elemen ke garis dasar

• flex-wrap

  • nowrap: Menempatkan elemen dalam satu baris
  • wrap: Menempatkan elemen dalam beberapa baris
  • wrap-reverse: Menempatkan elemen dalam beberapa baris dengan urutan terbalik

• Contoh kode

  • .container { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: nowrap; }

• Pembuat

  • Dibuat oleh Yoav Sabag
  • Anda dapat menemukan informasi lebih lanjut di YouTube dan GitHub

[GN⁺]

Komentar Hacker News

• Flexbox itu sederhana dan mudah dipahami, tetapi nama properti dan nilainya tidak intuitif

  • Nama-nama seperti justify-content dan align-items menimbulkan kebingungan
  • Perlu beberapa percobaan untuk belajar Flexbox

• Merekomendasikan Flexboxfroggy.com dan cssgridgarden.com

  • Situs-situs ini berguna untuk belajar Flexbox dan CSS Grid

• Merekomendasikan panduan dari Josh

  • Menjelaskan secara detail tips dan trik tingkat lanjut Flexbox
  • Membahas konsep-konsep seperti flex-basis, auto margins, dan min-width

• Berbagi pengalaman membuat panduan interaktif serupa

  • Membantu menguatkan kembali ingatan

• Menyebut bahwa main-axis-arrangement dan cross-axis-alignment lebih mudah dipahami daripada justify-content dan align-items

• Mengungkapkan kesulitan menggunakan Flexbox dengan benar

  • Menyebut Flexboxfroggy.com juga tidak membantu

• Membutuhkan tantangan menarik untuk berlatih layout CSS

  • ChatGPT membantu dalam debugging CSS, tetapi tetap diperlukan pemahaman yang mendalam tentang CSS

• Berpendapat sintaks Flexbox dan Grid bersifat deskriptif

  • Memahami model kotak dan menggunakan Firefox Dev Tools akan membantu
  • Flexboxfroggy dan cssgridgarden berguna untuk latihan
  • Sering merujuk ke cheat sheet CSS-tricks

• Menyebut bahwa properti item anak di Flexbox juga penting

  • Hanya membahas empat properti container terasa terbatas

• Membuat cheat sheet untuk referensi properti Flexbox

  • Bisa juga berguna bagi orang lain