Podcast CSS - 010: Flexbox
Pola desain yang bisa rumit dalam desain responsif adalah {i>sidebar<i} yang sejajar dengan beberapa saat ini. Di mana ada ruang pandang, pola ini berfungsi dengan baik, tetapi di mana ruang dipersempit, tata letak yang kaku dapat menjadi masalah.
Model Tata Letak Kotak Fleksibel (flexbox) adalah model tata letak yang didesain untuk konten satu dimensi. Alat ini unggul dalam mengambil banyak item dengan ukuran berbeda, dan mengembalikan tata letak terbaik untuk item-item tersebut.
Ini adalah model tata letak yang 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 ke baris baru. Alih-alih mengatur dimensi yang kaku untuk diikuti oleh browser, dengan flexbox, Anda dapat memberikan batasan yang fleksibel untuk mengisyaratkan bagaimana konten dapat ditampilkan.
Apa yang dapat Anda lakukan dengan tata letak yang fleksibel?
Tata letak Flex memiliki fitur-fitur berikut, yang dapat Anda pelajari dalam panduan ini.
- Label dapat ditampilkan sebagai baris, atau kolom.
- Mereka mengikuti mode penulisan dokumen.
- Secara default, kolom ini berisi satu baris, tetapi dapat diminta untuk digabungkan ke beberapa baris.
- Item dalam tata letak dapat disusun ulang secara visual, terlepas dari urutannya di DOM.
- Ruang dapat didistribusikan di dalam item, sehingga item menjadi lebih besar dan lebih kecil sesuai dengan ruang yang tersedia di induknya.
- Ruang dapat didistribusikan di sekitar item dan garis fleksibel dalam tata letak yang digabungkan, menggunakan properti Perataan Kotak.
- Item itu sendiri dapat disejajarkan pada sumbu silang.
Sumbu utama dan sumbu silang
Kunci untuk memahami flexbox adalah memahami konsep sumbu utama dan sumbu silang.
Sumbu utama adalah sumbu yang ditetapkan oleh properti flex-direction
Anda.
Jika row
, sumbu utama Anda berada di sepanjang baris,
jika column
, sumbu utama Anda berada di sepanjang kolom.
Item fleksibel bergerak sebagai kelompok pada sumbu utama. Ingat: kita memiliki banyak hal dan kita mencoba membuat tata letak terbaik untuk semuanya sebagai grup.
Sumbu silang mengarah ke
arah lain terhadap sumbu utama,
jadi jika flex-direction
adalah row
, sumbu silang akan berjalan di sepanjang kolom.
Anda dapat melakukan dua hal pada sumbu silang.
Anda dapat memindahkan item satu per satu atau secara berkelompok, agar item tersebut sejajar satu sama lain dan
container. Selain itu, jika telah menggabungkan baris fleksibel,
Anda dapat memperlakukan baris tersebut sebagai grup untuk mengontrol cara ruang ditetapkan ke baris tersebut.
Anda akan melihat cara kerja semua ini dalam panduan ini,
untuk saat ini perlu diingat bahwa sumbu utama mengikuti flex-direction
Anda.
Membuat penampung fleksibel
Mari kita lihat perilaku flexbox dengan mengambil sekelompok item berukuran berbeda dan menggunakan flexbox untuk menata 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 flex, bukan blok
reguler dan tata letak inline.
Lakukan ini dengan mengubah nilai properti display
menjadi flex
.
.container {
display: flex;
}
Seperti yang telah Anda pelajari di panduan tata letak, hal ini akan memberi Anda kotak tingkat blok, dengan turunan item fleksibel. Item fleksibel akan langsung mulai menunjukkan beberapa perilaku flexbox, menggunakan nilai awalnya.
Nilai awal berarti:
- Item ditampilkan sebagai baris.
- Tidak digabungkan.
- Dimensi tidak bertambah untuk mengisi penampung.
- Keduanya sejajar di awal penampung.
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 ditata sebagai kolom dari ujung penampung fleksibel.
Anda dapat mencoba semua nilai menggunakan grup item kami dalam demo di bawah.
Membalikkan alur item dan aksesibilitas
Anda harus berhati-hati saat menggunakan properti apa pun yang mengurutkan ulang tampilan visual
tidak lagi diatur dalam dokumen HTML,
karena dapat berdampak negatif
pada aksesibilitas.
Nilai row-reverse
dan column-reverse
adalah contoh yang baik untuk contoh ini.
Pengurutan ulang hanya terjadi untuk urutan visual, bukan urutan logis.
Hal ini penting untuk dipahami karena urutan logis adalah urutan yang akan dibacakan oleh pembaca layar
konten,
dan siapa pun yang menavigasi menggunakan keyboard akan mengikutinya.
Anda dapat melihat di video berikut bagaimana dalam tata letak baris terbalik, tombol tab di antara tautan menjadi terputus karena navigasi keyboard mengikuti DOM, bukan visual tampilan.
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 hal tersebut tidak akan membuat situs Anda sulit digunakan oleh sebagian orang.
Untuk informasi selengkapnya, lihat:
Mode dan arah penulisan
Item fleksibel disusun sebagai baris secara default. Baris berjalan mengikuti arah kalimat yang mengalir dalam mode penulisan dan arah skrip Anda. Artinya, jika Anda bekerja dalam bahasa Arab, yang memiliki arah skrip kanan-ke-kiri (rtl), item akan berbaris 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 typeface Jepang, 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 kiri ke kanan lainnya. Hal ini akan memudahkan Anda mengasumsikan bahwa item fleksibel sejajar di sebelah kiri, dan berjalan secara horizontal.
Dengan mempertimbangkan sumbu utama dan silang serta mode penulisan, fakta bahwa kita membahas awal dan akhir, bukan 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 main-start. Akhir sumbu tersebut adalah main-end. Awal dari sumbu silang adalah cross-start dan akhir cross-end.
Menggabungkan item fleksibel
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 terjadi overflow.
Untuk membuat item digabungkan, tambahkan flex-wrap: wrap
ke penampung fleksibel.
.container {
display: flex;
flex-wrap: wrap;
}
Saat penampung fleksibel digabungkan, beberapa baris fleksibel akan dibuat. Dalam hal distribusi ruang, setiap baris 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 yang bersifat satu dimensi. Anda dapat mengontrol {i>alignment<i} dalam satu sumbu, baris atau kolom, tidak keduanya bersamaan seperti yang bisa kita lakukan di {i>grid<i}.
Singkatan alur fleksibel
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 kontainer kita memiliki lebih banyak ruang
dari yang dibutuhkan untuk menampilkan item,
item berbaris di awal dan
tidak membesar untuk memenuhi ruang.
Konten 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
-nya.flex-basis: auto
: item memiliki ukuran dasarauto
.
Ini dapat diwakili oleh nilai kata kunci flex: initial
.
Properti singkatan flex
,
atau longhand flex-grow
, flex-shrink
, dan flex-basis
diterapkan ke turunan
penampung fleksibel.
Untuk membuat item bertambah,
sekaligus memungkinkan item besar memiliki lebih banyak ruang daripada item kecil menggunakan flex:auto
.
Anda dapat mencobanya menggunakan demo di atas.
Tindakan ini akan menetapkan properti ke:
flex-grow: 1
: item dapat menjadi lebih besar dariflex-basis
.flex-shrink: 1
: item dapat menyusut lebih kecil daripadaflex-basis
-nya.flex-basis: auto
: item memiliki ukuran dasarauto
.
Jika flex: auto
digunakan, item akan memiliki ukuran yang berbeda,
sebagai ruang yang dibagi di antara item dibagikan setelah setiap item ditata sebagai
ukuran maksimum konten.
Jadi item besar akan mendapatkan lebih banyak ruang.
Untuk memaksa semua item menjadi ukuran yang konsisten dan mengabaikan perubahan ukuran konten
flex:auto
ke flex: 1
dalam demo.
Tindakan ini akan mengekstrak ke:
flex-grow: 1
: item dapat tumbuh lebih besar dariflex-basis
-nya.flex-shrink: 1
: item dapat menyusut lebih kecil daripadaflex-basis
-nya.flex-basis: 0
: item memiliki ukuran dasar0
.
Penggunaan flex: 1
menunjukkan bahwa semua item memiliki ukuran nol,
sehingga semua ruang dalam penampung fleksibel tersedia untuk didistribusikan.
Karena semua item memiliki faktor flex-grow
dari 1
, semua item akan tumbuh secara merata dan ruangnya akan dibagi secara merata.
Memungkinkan item bertambah dengan kecepatan yang berbeda-beda
Anda tidak harus memberikan faktor flex-grow
dari 1
kepada semua item.
Anda dapat memberikan faktor flex-grow
yang berbeda ke item fleksibel Anda.
Pada demo di bawah, item pertama memiliki flex: 1
, yang kedua flex: 2
, dan flex: 3
ketiga.
Saat item ini bertambah dari 0
, ruang yang tersedia di penampung fleksibel dibagi menjadi enam.
Satu bagian diberikan
ke item pertama,
dua bagian ke bagian kedua,
tiga bagian ke bagian ketiga.
Anda dapat melakukan hal yang sama dari flex-basis
auto
, meskipun Anda harus menentukan ketiga
nilai tersebut.
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 untuk menggunakan flex-basis
dari auto
adalah memungkinkan {i>browser<i} untuk
mengetahui distribusi ruang.
Jika Anda ingin membuat suatu item tumbuh lebih banyak dari yang ditentukan oleh algoritma, bagaimanapun caranya
berguna
Menyusun ulang item fleksibel
Item dalam penampung fleksibel dapat diurutkan ulang menggunakan properti order
.
Properti ini memungkinkan pengurutan item dalam grup ordinal.
Item ditata sesuai arah yang ditentukan oleh flex-direction
,
nilai terendah terlebih dahulu.
Jika lebih dari satu item memiliki nilai yang sama, item tersebut akan ditampilkan dengan item lain dengan nilai tersebut.
Contoh di bawah menunjukkan pengurutan ini.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang flexbox
flex-direction
default adalah
row
column
Secara default, penampung fleksibel menggabungkan turunan.
flex-wrap: wrap
dengan display: flex
untuk menggabungkan turunanItem turunan fleksibel tampak dibatasi, properti fleksibel manakah yang membantu mengurangi hal ini?
flex-grow
flex-shrink
flex-basis
Ringkasan perataan Flexbox
Flexbox menyertakan satu set properti untuk menyelaraskan item dan mendistribusikan ruang di antara item. Properti ini sangat berguna sehingga telah dipindahkan ke spesifikasinya sendiri, Anda akan menemukannya di {i>Grid Layout<i} juga. Di sini Anda dapat mengetahui cara kerjanya saat menggunakan flexbox.
Kumpulan properti dapat ditempatkan ke dalam dua grup. 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 grup pada sumbu silang.
Jika Anda mengerjakan sumbu utama, properti dimulai dengan justify-
.
Pada sumbu silang, sumbu tersebut dimulai dengan align-
.
Mendistribusikan ruang pada sumbu utama
Dengan HTML yang digunakan sebelumnya, item fleksibel ditata sebagai baris, sehingga ada ruang pada sumbu utama.
Item tidak cukup besar untuk mengisi penampung fleksibel sepenuhnya.
Item sejajar di awal penampung fleksibel karena nilai awal justify-content
adalah flex-start
.
Item akan sejajar di awal dan spasi tambahan akan berada di akhir.
Tambahkan properti justify-content
ke container flex,
beri nilai flex-end
,
dan item ke sejajar di ujung kontainer 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
.
Cobalah beberapa nilai dalam demo, dan lihat MDN untuk kumpulan lengkap nilai yang mungkin.
Dengan flex-direction: column
Jika Anda telah mengubah flex-direction
menjadi column
, justify-content
akan berfungsi di
kolom.
Agar memiliki ruang cadangan di penampung saat bekerja sebagai kolom, Anda harus memberi penampung
height
atau block-size
.
Jika tidak, Anda tidak akan memiliki ruang cadangan untuk mendistribusikan.
Coba nilai yang berbeda, kali ini dengan tata letak kolom flexbox.
Mendistribusikan ruang antarbaris flex
Dengan penampung fleksibel yang digabungkan, Anda mungkin memiliki ruang untuk mendistribusikan 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 ke 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 memiliki baris item fleksibel yang digabungkan,
dan penampung memiliki block-size
agar kita memiliki ruang kosong.
Singkatan place-content
Untuk menetapkan justify-content
dan align-content
, Anda dapat menggunakan place-content
dengan satu
atau dua nilai.
Satu nilai akan digunakan untuk kedua sumbu,
jika Anda menentukan bahwa nilai pertama 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 */
}
Menyelaraskan item pada sumbu silang
Pada sumbu silang, Anda juga dapat menyejajarkan item dalam garis fleksibel menggunakan align-items
dan align-self
.
Ruang yang tersedia untuk perataan ini akan bergantung pada tinggi penampung flex,
atau baris flex jika ada kumpulan item yang digabungkan.
Nilai awal align-self
adalah stretch
,
itulah sebabnya item fleksibel dalam satu baris akan direntangkan hingga setinggi item tertinggi secara default.
Untuk mengubahnya, tambahkan properti align-self
ke item fleksibel Anda.
.container {
display: flex;
}
.item1 {
align-self: flex-start;
}
Gunakan salah satu nilai berikut untuk meratakan 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 pergerakannya dalam ruangnya pada sumbu silang.
Properti align-self
diterapkan ke setiap item.
Properti align-items
dapat diterapkan ke penampung flex untuk menetapkan semua properti align-self
individual sebagai grup.
.container {
display: flex;
align-items: flex-start;
}
Dalam demo berikutnya, coba ubah nilai align-items
untuk menyelaraskan semua item pada silang
sumbu sebagai satu kelompok.
Mengapa tidak ada justify-self di flexbox?
Item fleksibel berfungsi sebagai satu kelompok pada sumbu utama. Jadi, tidak ada konsep pemisahan item individual dari grup tersebut.
Di tata letak petak, properti justify-self
dan justify-items
berfungsi pada sumbu inline
untuk melakukan penyelarasan item pada sumbu itu dalam area kisi-kisinya.
Karena cara tata letak fleksibel memperlakukan item sebagai grup,
properti ini tidak diterapkan dalam konteks fleksibel.
Perlu diketahui bahwa flexbox berfungsi dengan sangat baik dengan margin otomatis.
Jika Anda perlu memisahkan satu item dari grup,
atau memisahkan grup menjadi dua grup, 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 memisahkan grup.
Cara memusatkan item secara vertikal dan horizontal
Properti perataan dapat digunakan untuk memusatkan item di dalam kotak lain.
Properti justify-content
menyelaraskan 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 meratakan 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 ke 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
menyelaraskan garis fleksibel, bukan penyelarasan item turunan.height: auto
align-items: flex-start
Resource
- MDN CSS Flexible Box Layout menyertakan serangkaian panduan mendetail dengan contoh.
- Panduan CSS Tricks untuk Flexbox
- Yang Terjadi Saat Anda Membuat Penampung Flex Flexbox
- Semua Yang Perlu Anda Ketahui Tentang Penyelarasan di Flexbox
- Seberapa Besar Perangkat Fleksibel Itu?
- Kasus Penggunaan untuk Flexbox
- Memeriksa dan men-debug tata letak CSS Flexbox di Chrome DevTools