Flexbox

Podcast CSS - 010: Flexbox

Pola desain yang bisa menjadi rumit dalam desain responsif adalah sidebar yang terletak sejajar dengan beberapa konten. Jika ada ruang area pandang, pola ini berfungsi dengan baik, tetapi jika ruang dipadatkan, tata letak yang kaku dapat menjadi masalah.

Model Tata Letak Kotak Fleksibel (flexbox) adalah model tata letak yang didesain untuk konten satu dimensi. Contoh ini baik dalam mengambil banyak item yang memiliki ukuran berbeda, dan menampilkan tata letak terbaik untuk item tersebut.

Ini adalah model tata letak ideal untuk pola sidebar ini. Flexbox tidak hanya membantu menata sidebar dan konten secara inline, tetapi jika tidak ada cukup ruang yang tersisa, sidebar akan dipecah menjadi baris baru. Daripada menetapkan dimensi yang kaku untuk diikuti browser, dengan flexbox, Anda dapat memberikan batas yang fleksibel untuk menunjukkan bagaimana konten dapat ditampilkan.

Apa yang dapat Anda lakukan dengan tata letak yang fleksibel?

Tata letak fleksibel memiliki fitur berikut, yang dapat Anda jelajahi dalam panduan ini.

• Keduanya dapat ditampilkan sebagai baris, atau kolom.
• Mereka mematuhi mode penulisan dokumen.
• Semuanya berupa baris tunggal secara default, tetapi dapat diminta untuk digabungkan ke beberapa baris.
• Item dalam tata letak dapat diurutkan ulang secara visual, jauh dari urutannya di DOM.
• Ruang dapat didistribusikan di dalam item, sehingga menjadi semakin besar dan kecil sesuai dengan ruang yang tersedia di induknya.
• Ruang dapat didistribusikan di sekitar item dan garis fleksibel dalam tata letak gabungan, menggunakan properti Box Alignment.
• Item itu sendiri dapat disejajarkan pada sumbu silang.

Sumbu utama dan sumbu silang

Kunci untuk memahami {i>flexbox<i} adalah memahami konsep sumbu utama dan sumbu silang. Sumbu utama adalah sumbu yang ditetapkan oleh properti flex-direction Anda. Jika nilainya row, sumbu utama Anda berada di sepanjang baris, jika column, sumbu utama Anda berada di sepanjang kolom.

Item Flex bergerak sebagai kelompok pada sumbu utama. Ingat: kita memiliki banyak hal dan kita mencoba mendapatkan tata letak terbaik sebagai grup.

Sumbu silang berjalan ke arah lain dari sumbu utama, jadi jika flex-direction adalah row, sumbu silang akan berada di sepanjang kolom.

Anda dapat melakukan dua hal pada sumbu silang. Anda dapat memindahkan item satu per satu atau sebagai grup, sehingga sejajar satu sama lain dan dengan penampung fleksibel. Selain itu, jika telah menggabungkan garis fleksibel, Anda dapat memperlakukan baris tersebut sebagai grup untuk mengontrol cara menetapkan ruang ke baris tersebut. Anda akan melihat cara kerja semua ini di seluruh panduan ini. Untuk saat ini, perhatikan bahwa sumbu utama mengikuti flex-direction.

Membuat penampung fleksibel

Mari kita lihat perilaku flexbox dengan mengambil sekelompok item dengan berbagai ukuran dan menggunakan flexbox untuk menata tata letaknya.

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

Untuk menggunakan flexbox, Anda harus mendeklarasikan bahwa Anda ingin menggunakan konteks pemformatan fleksibel dan bukan blok reguler dan tata letak inline. Lakukan hal ini dengan mengubah nilai properti display menjadi flex.

.container {
  display: flex;
}

Seperti yang Anda pelajari dalam panduan tata letak, ini akan memberi Anda kotak tingkat blok, dengan turunan item fleksibel. Item flex akan segera mulai menunjukkan beberapa perilaku flexbox, menggunakan nilai awal.

Catatan: Semua properti CSS memiliki nilai awal yang mengontrol perilakunya "secara unik" jika Anda belum menerapkan CSS apa pun untuk mengubah perilaku awal tersebut. Turunan penampung fleksibel kita menjadi item fleksibel segera setelah induknya mendapatkan display: flex, sehingga nilai awal ini berarti bahwa kita mulai melihat beberapa perilaku flexbox.

Nilai awal berarti bahwa:

• Item ditampilkan sebagai baris.
• Gambar tersebut tidak digabungkan.
• Mereka tidak tumbuh untuk mengisi kontainer.
• Semuanya berjajar di awal container.

Mengontrol arah item

Meskipun Anda belum menambahkan properti flex-direction, item akan ditampilkan sebagai baris karena nilai awal flex-direction adalah row. Jika menginginkan baris, Anda tidak perlu menambahkan properti. Untuk mengubah arah, tambahkan properti dan salah satu dari empat nilai:

• row: item disusun sebagai baris.
• row-reverse: item disusun sebagai baris dari akhir penampung fleksibel.
• column: item disusun sebagai kolom.
• column-reverse : item disusun sebagai kolom dari akhir penampung fleksibel.

Anda dapat mencoba semua nilai menggunakan kelompok item kami dalam demo di bawah ini.

Membalikkan alur item dan aksesibilitas

Anda harus berhati-hati saat menggunakan properti apa pun yang mengubah urutan tampilan visual jauh dari cara pengurutan sesuatu dalam dokumen HTML, karena dapat berdampak negatif pada aksesibilitas. Nilai row-reverse dan column-reverse adalah contoh yang baik untuk hal ini. Pengurutan ulang hanya terjadi untuk urutan visual, bukan urutan logis. Hal ini penting untuk dipahami karena urutan yang logis adalah urutan pembaca layar akan membacakan konten, dan siapa pun yang melakukan navigasi menggunakan keyboard akan mengikutinya.

Dalam video berikut, Anda dapat melihat bagaimana dalam tata letak baris terbalik, tombol tab di antara link menjadi terputus karena navigasi keyboard mengikuti DOM, bukan tampilan visual.

Apa pun yang dapat mengubah urutan item di flexbox atau petak dapat menyebabkan masalah ini. Oleh karena itu, setiap pengurutan ulang harus mencakup pengujian menyeluruh untuk memeriksa bahwa situs Anda tidak akan sulit digunakan oleh sebagian orang.

Untuk informasi lebih lanjut, lihat:

• Pengurutan ulang konten
• Flexbox dan navigasi keyboard terputus

Mode dan arah penulisan

Item Flex disusun sebagai baris secara default. Sebuah baris berjalan sesuai arah aliran kalimat dalam mode penulisan dan arah skrip Anda. Artinya, jika Anda bekerja dalam bahasa Arab, yang memiliki arah skrip kanan-ke-kiri (rtl), item akan berjajar di sebelah kanan. Urutan tab juga akan dimulai di sebelah kanan karena ini adalah cara kalimat dibaca dalam bahasa Arab.

Jika Anda menggunakan mode penulisan vertikal, seperti beberapa jenis huruf Jepang, maka baris akan berjalan secara vertikal, dari atas ke bawah. Coba ubah flex-direction dalam demo ini yang menggunakan mode penulisan vertikal.

Oleh karena itu, cara item fleksibel berperilaku secara default ditautkan ke mode penulisan dokumen. Sebagian besar tutorial ditulis menggunakan bahasa Inggris, atau mode penulisan horizontal lainnya, yaitu dari kiri ke kanan. Ini akan memudahkan untuk mengasumsikan bahwa item fleksibel berjajar di sebelah kiri, dan berjalan secara horizontal.

Dengan sumbu utama dan silang ditambah mode penulisan yang perlu dipertimbangkan, fakta yang kita bahas tentang start dan end bukan bagian atas, bawah, kiri, dan kanan di flexbox mungkin lebih mudah dipahami. Setiap sumbu memiliki awal dan akhir. Awal sumbu utama disebut sebagai main-start. Jadi item fleksibel kita awalnya berbaris dari {i>main-start<i}. Akhir sumbu tersebut adalah main-end. Awal sumbu silang adalah cross-start dan cross-end akhir.

Menggabungkan item flex

Nilai awal properti flex-wrap adalah nowrap. Artinya, jika tidak ada cukup ruang dalam container, item akan meluap.

Setelah pengguna mencapai ukuran konten min, item fleksibel akan mulai meluap dari penampungnya

Item yang ditampilkan menggunakan nilai awal akan menyusut sekecil mungkin, hingga ukuran min-content sebelum overflow terjadi.

Untuk membuat item digabungkan, tambahkan flex-wrap: wrap ke penampung fleksibel.

.container {
  display: flex;
  flex-wrap: wrap;
}

Saat penampung fleksibel digabungkan, penampung ini akan membuat beberapa baris fleksibel. Dalam hal distribusi ruang, setiap garis bertindak seperti kontainer fleksibel baru. Oleh karena itu, jika Anda menggabungkan baris, tidak mungkin mendapatkan sesuatu di baris 2 untuk sejajar dengan sesuatu di atasnya di baris 1. Inilah yang dimaksud dengan flexbox menjadi satu dimensi. Anda dapat mengontrol perataan dalam satu sumbu, baris, atau kolom, tidak keduanya bersamaan seperti yang dapat kita lakukan di petak.

Singkatan flex-flow

Anda dapat menetapkan properti flex-direction dan flex-wrap menggunakan singkatan flex-flow. Misalnya, untuk menetapkan flex-direction ke column dan mengizinkan item digabungkan:

.container {
  display: flex;
  flex-flow: column wrap;
}

Mengontrol ruang di dalam item fleksibel

Dengan asumsi penampung kita memiliki lebih banyak ruang daripada yang diperlukan untuk menampilkan item, item akan berjajar di awal dan tidak bertambah untuk mengisi ruang tersebut. Mereka berhenti berkembang pada ukuran konten maksimumnya. Hal ini karena nilai awal properti flex- adalah:

• flex-grow: 0: item tidak bertambah.
• flex-shrink: 1: item dapat menyusut lebih kecil dari flex-basis.
• flex-basis: auto: item memiliki ukuran dasar auto.

Nilai ini dapat diwakili oleh nilai kata kunci flex: initial. Properti singkatan flex, atau bentuk panjang dari flex-grow, flex-shrink, dan flex-basis diterapkan ke turunan container fleksibel.

Untuk menyebabkan item bertambah, sekaligus mengizinkan item besar memiliki lebih banyak ruang daripada item kecil menggunakan flex:auto. Anda dapat mencobanya menggunakan demo di atas. Tindakan ini menetapkan properti ke:

• flex-grow: 1: item dapat berukuran lebih besar dari flex-basis.
• flex-shrink: 1: item dapat menyusut lebih kecil dari flex-basis.
• flex-basis: auto: item memiliki ukuran dasar auto.

Menggunakan flex: auto akan berarti bahwa item akan memiliki ukuran yang berbeda, karena ruang yang dibagikan antar-item dibagikan setelah setiap item ditetapkan sebagai ukuran konten maksimum. Jadi, item berukuran besar akan mendapatkan lebih banyak ruang penyimpanan. Untuk memaksa semua item agar memiliki ukuran yang konsisten dan mengabaikan ukuran konten, ubah flex:auto menjadi flex: 1 dalam demo.

Ini akan mengurai menjadi:

• flex-grow: 1: item dapat berukuran lebih besar dari flex-basis.
• flex-shrink: 1: item dapat menyusut lebih kecil dari flex-basis.
• flex-basis: 0: item memiliki ukuran dasar 0.

Menggunakan flex: 1 berarti semua item memiliki ukuran nol, sehingga semua ruang dalam penampung fleksibel tersedia untuk didistribusikan. Karena semua item memiliki faktor flex-grow 1, semua item akan bertambah besar dan ruangnya dibagikan secara merata.

Catatan: Ada juga nilai flex: none, yang akan memberi Anda item fleksibel tidak fleksibel yang tidak bertambah atau menyusut. Hal ini mungkin berguna jika Anda hanya menggunakan flexbox untuk mengakses properti perataan, tetapi tidak menginginkan perilaku yang fleksibel.

Memungkinkan jumlah item bertambah pada kecepatan yang berbeda

Anda tidak perlu memberikan faktor flex-grow 1 ke semua item. Anda dapat memberikan faktor flex-grow yang berbeda untuk item flex Anda. Dalam demo di bawah item pertama memiliki flex: 1, flex: 2 kedua, dan flex: 3 ketiga. Saat item ini bertambah dari 0, ruang yang tersedia di container fleksibel dibagikan menjadi enam. Satu bagian diberikan ke item pertama, dua bagian ke item kedua, tiga bagian ke item ketiga.

Anda dapat melakukan hal yang sama dari flex-basis auto, meskipun Anda harus menentukan tiga nilai. Nilai pertama adalah flex-grow, flex-shrink kedua, dan flex-basis ketiga.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

Ini adalah kasus penggunaan yang kurang umum karena alasan menggunakan flex-basis dari auto adalah untuk memungkinkan browser mengetahui distribusi ruang. Namun, tindakan tersebut mungkin berguna jika Anda ingin item berkembang sedikit lebih banyak daripada yang ditentukan oleh algoritma.

Menyusun ulang item fleksibel

Item dalam penampung fleksibel Anda dapat disusun ulang menggunakan properti order. Properti ini memungkinkan pengurutan item dalam grup ordinal. Item ditata ke arah yang ditentukan oleh flex-direction, nilai terendah terlebih dahulu. Jika lebih dari satu item memiliki nilai yang sama, item tersebut akan ditampilkan bersama item lain yang memiliki nilai tersebut.

Contoh di bawah ini menunjukkan urutan ini.

Peringatan: Penggunaan order memiliki masalah yang sama dengan nilai row-reverse dan column-reverse dari flex-direction. Akan sangat mudah untuk membuat pengalaman terputus untuk beberapa pengguna. Jangan gunakan order karena Anda memperbaiki hal-hal yang tidak berurutan dalam dokumen. Jika item secara logis seharusnya berada dalam urutan yang berbeda, ubah HTML Anda.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang flexbox

flex-direction default-nya adalah

row

Secara default, flexbox akan memasukkan item ke dalam baris, menyejajarkannya di awal. Jika diaktifkan, penggabungan akan terus membuat baris untuk aliran turunan.

column

Menyetel arah fleksibel ke kolom adalah cara yang bagus untuk menumpuk elemen, tetapi itu bukan nilai default.

Secara default, container flex menggabungkan turunan.

true

Pengemasan harus diaktifkan.

false

Gunakan flex-wrap: wrap dengan display: flex untuk menggabungkan turunan

Item turunan fleksibel tampak diciutkan, properti fleksibel mana yang membantu mengurangi hal ini?

flex-grow

Properti ini menjelaskan apakah elemen dapat tumbuh melebihi ukuran dasar, bukan perilakunya berdasarkan dasar.

flex-shrink

Ya, properti ini menjelaskan cara menangani ukuran jika lebar berada di bawah dasar.

flex-basis

Ini memberikan titik awal dari ukuran, tetapi bukan bagaimana menangani skenario ukuran di mana lebar berada di bawah basis, seperti dalam skenario yang diremas.

Ringkasan perataan Flexbox

Flexbox menyediakan serangkaian properti untuk menyelaraskan item dan mendistribusikan ruang di antara item. Properti ini sangat berguna sehingga telah dipindahkan ke spesifikasinya sendiri, Anda juga akan menemukannya di Tata Letak Petak. Di sini Anda dapat mengetahui cara kerjanya saat Anda menggunakan flexbox.

Kumpulan properti dapat ditempatkan menjadi dua kelompok. Properti untuk distribusi ruang, dan properti untuk perataan. Properti yang mendistribusikan ruang adalah:

• justify-content: distribusi ruang pada sumbu utama.
• align-content: distribusi ruang pada sumbu silang.
• place-content: singkatan untuk menetapkan kedua properti di atas.

Properti yang digunakan untuk perataan di flexbox:

• align-self: meratakan satu item pada sumbu silang.
• align-items: meratakan semua item sebagai kelompok pada sumbu silang.

Jika Anda bekerja pada sumbu utama, propertinya akan diawali dengan justify-. Pada sumbu silang, parameter tersebut diawali dengan align-.

Mendistribusikan ruang pada sumbu utama

Dengan HTML yang digunakan sebelumnya, item fleksibel ditata sebagai baris, ada ruang pada sumbu utama. Item tidak cukup besar untuk mengisi seluruh container fleksibel. Item baris akan berada di awal penampung fleksibel karena nilai awal justify-content adalah flex-start. Item baris di awal dan ruang ekstra di bagian akhir.

Tambahkan properti justify-content ke penampung fleksibel, beri nilai flex-end, dan item berjajar di akhir penampung dan ruang cadangan ditempatkan di awal.

.container {
  display: flex;
  justify-content: flex-end;
}

Anda juga dapat mendistribusikan ruang di antara item dengan justify-content: space-between.

Coba beberapa nilai dalam demo, dan lihat MDN untuk mengetahui set lengkap nilai yang memungkinkan.

Catatan: Agar properti justify-content dapat melakukan apa pun, Anda harus memiliki ruang cadangan di container di sumbu utama. Jika item Anda mengisi sumbu tersebut, tidak ada ruang untuk dibagikan sehingga properti tidak akan melakukan apa pun.

Dengan flex-direction: column

Jika Anda telah mengubah flex-direction menjadi column, justify-content akan berfungsi di kolom tersebut. Untuk memiliki ruang cadangan dalam container saat bekerja sebagai kolom, Anda harus memberikan height atau block-size ke container. Jika tidak, Anda tidak akan memiliki ruang kosong untuk didistribusikan.

Coba nilai yang berbeda, kali ini dengan tata letak kolom flexbox.

Mendistribusikan ruang di antara garis fleksibel

Dengan penampung fleksibel yang dibungkus, Anda mungkin memiliki ruang untuk didistribusikan pada sumbu silang. Dalam kasus ini, Anda dapat menggunakan properti align-content dengan nilai yang sama seperti justify-content. Tidak seperti justify-content yang menyelaraskan item dengan flex-start secara default, nilai awal align-content adalah stretch. Tambahkan properti align-content ke penampung fleksibel untuk mengubah perilaku default tersebut.

.container {
  align-content: center;
}

Coba ini di demo. Contoh ini telah menggabungkan baris item fleksibel, dan container-nya memiliki block-size agar kita memiliki ruang cadangan.

Singkatan place-content

Untuk menetapkan justify-content dan align-content, Anda dapat menggunakan place-content dengan satu atau dua nilai. Nilai tunggal akan digunakan untuk kedua sumbu, jika Anda menentukan bahwa sumbu pertama akan digunakan untuk align-content dan nilai kedua untuk justify-content.

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

Meratakan item pada sumbu silang

Pada sumbu silang, Anda juga dapat meratakan item dalam baris fleksibel menggunakan align-items dan align-self. Ruang yang tersedia untuk perataan ini akan bergantung pada tinggi penampung fleksibel, atau baris fleksibel jika terdiri dari serangkaian item yang digabungkan.

Nilai awal align-self adalah stretch, itulah sebabnya item fleksibel dalam baris direntangkan hingga tinggi item tertinggi secara default. Untuk mengubahnya, tambahkan properti align-self ke salah satu item fleksibel Anda.

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

Gunakan salah satu nilai berikut untuk menyelaraskan item:

• flex-start
• flex-end
• center
• stretch
• baseline

Lihat daftar lengkap nilai di MDN.

Demo berikutnya memiliki satu baris item fleksibel dengan flex-direction: row. Item terakhir menentukan tinggi penampung fleksibel. Item pertama memiliki properti align-self dengan nilai flex-start. Coba ubah nilai pada properti tersebut untuk melihat bagaimana nilai bergerak dalam ruangnya pada sumbu silang.

Properti align-self diterapkan ke masing-masing item. Properti align-items dapat diterapkan ke penampung fleksibel untuk menetapkan semua properti align-self individual sebagai grup.

.container {
  display: flex;
  align-items: flex-start;
}

Dalam demo berikutnya ini, coba ubah nilai align-items untuk meratakan semua item pada sumbu silang sebagai grup.

Mengapa tidak ada justify-self di flexbox?

Item Flex berfungsi sebagai kelompok pada sumbu utama. Jadi tidak ada konsep untuk membagi masing-masing item dari kelompok itu.

Dalam tata letak petak, properti justify-self dan justify-items berfungsi pada sumbu sejajar untuk menyejajarkan item pada sumbu tersebut dalam area petaknya. Karena cara tata letak fleksibel memperlakukan item sebagai grup, properti ini tidak diterapkan dalam konteks fleksibel.

Perlu diketahui bahwa flexbox berfungsi sangat baik dengan margin otomatis. Jika Anda perlu memisahkan satu item dari kelompok, atau memisahkan kelompok menjadi dua kelompok, Anda dapat menerapkan margin untuk melakukannya. Pada contoh di bawah, item terakhir memiliki margin kiri auto. Margin otomatis menyerap semua ruang ke arah penerapannya. Artinya, item akan didorong ke kanan, sehingga membagi kelompok.

Cara menempatkan item di tengah secara vertikal dan horizontal

Properti perataan dapat digunakan untuk memusatkan item di dalam kotak lain. Properti justify-content meratakan item pada sumbu utama, yaitu baris. Properti align-items pada sumbu silang.

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Catatan: Di masa mendatang, kami mungkin dapat melakukan penyelarasan ini tanpa perlu menjadikan induk sebagai container fleksibel. Properti perataan ditetapkan untuk tata letak blok dan inline. Saat ini, belum ada browser yang menerapkannya. Namun, beralih ke konteks pemformatan fleksibel akan memberi Anda akses ke properti. Jika Anda perlu menyelaraskan sesuatu, itu adalah cara yang bagus untuk melakukannya.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang flexbox

.container {
  display: flex;
  direction: ltr;
}

Untuk menyejajarkan secara vertikal dengan flexbox, gunakan

ratakan kata kunci

Bagus

ratakan kata kunci

Maaf

.container {
  display: flex;
  direction: ltr;
}

Untuk menyejajarkan secara horizontal dengan flexbox, gunakan

ratakan kata kunci

Maaf

ratakan kata kunci

Bagus

.container {
  display: flex;
  direction: ltr;
}

Secara default, item fleksibel disejajarkan dengan stretch. Jika Anda ingin ukuran konten digunakan untuk item turunan, manakah dari gaya berikut yang akan Anda gunakan?

justify-content: flex-start

Properti justify adalah untuk perataan horizontal, bukan vertikal.

align-content: start

content meratakan garis fleksibel, bukan perataan item turunan.

height: auto

Ini tidak akan berpengaruh.

align-items: flex-start

Ya, kita ingin menyelaraskannya secara vertikal ke 'top' atau start, yang menghapus nilai regangan default dan menggunakan tinggi konten.

Referensi

• Tata Letak Kotak Fleksibel CSS MMD menyertakan serangkaian panduan mendetail dengan contoh.
• Panduan Trik CSS untuk Flexbox
• Yang Terjadi Saat Anda Membuat Container Flexbox Flex
• Semua Yang Perlu Anda Ketahui tentang Penyelarasan di Flexbox
• Seberapa Besar Kotak Fleksibel Itu?
• Kasus Penggunaan untuk Flexbox
• Memeriksa dan men-debug tata letak CSS Flexbox di Chrome DevTools