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.
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:
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.
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 dariflex-basis
.flex-basis: auto
: item memiliki ukuran dasarauto
.
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 dariflex-basis
.flex-shrink: 1
: item dapat menyusut lebih kecil dariflex-basis
.flex-basis: auto
: item memiliki ukuran dasarauto
.
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 dariflex-basis
.flex-shrink: 1
: item dapat menyusut lebih kecil dariflex-basis
.flex-basis: 0
: item memiliki ukuran dasar0
.
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.
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.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang flexbox
flex-direction
default-nya adalah
row
column
Secara default, container flex menggabungkan turunan.
flex-wrap: wrap
dengan display: flex
untuk menggabungkan turunanItem turunan fleksibel tampak diciutkan, properti fleksibel mana yang membantu mengurangi hal ini?
flex-grow
flex-shrink
flex-basis
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.
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;
}
Menguji pemahaman Anda
Uji pengetahuan Anda tentang flexbox
.container { display: flex; direction: ltr; }
Untuk menyejajarkan secara vertikal dengan flexbox, gunakan
.container { display: flex; direction: ltr; }
Untuk menyejajarkan secara horizontal dengan flexbox, gunakan
.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
align-content: start
content
meratakan garis fleksibel, bukan perataan item turunan.height: auto
align-items: flex-start
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