Flexbox

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, tapi 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 meletakkan {i>sidebar<i} dan konten secara sejajar, tetapi jika tidak ada cukup ruang yang tersisa, {i>sidebar<i} akan muncul di 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 {i>default<i} berbentuk satu baris, tetapi bisa diminta untuk menggabungkan ke beberapa baris.
  • Item dalam {i>layout<i} dapat diurutkan ulang secara visual, dari urutannya di DOM.
  • Ruang dapat didistribusikan di dalam item, sehingga mereka menjadi lebih besar dan lebih kecil sesuai dengan ruang yang tersedia di induknya.
  • Ruang dapat didistribusikan di sekitar item dan garis lentur dalam tata letak gabungan, menggunakan properti {i>Box Alignment<i}.
  • 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 itu adalah row, sumbu utama Anda berada di sepanjang baris, jika yang ditampilkan adalah column, sumbu utama Anda berada di sepanjang kolom.

Tiga kotak berdampingan dengan panah yang mengarah dari kiri ke kanan. Panah diberi label Sumbu utama

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.

Tiga kotak dengan ketinggian yang berbeda, di samping satu sama lain dengan panah yang mengarah dari kiri ke kanan. Panah tersebut diberi label Sumbu utama. Ada tanda panah lain yang menunjuk dari atas ke bawah. Yang ini diberi label Sumbu silang

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. Juga, jika Anda telah menggabungkan garis fleksibel, Anda bisa memperlakukan baris itu sebagai kelompok untuk mengontrol bagaimana 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 dengan ukuran yang berbeda dan menggunakan flexbox untuk meletakkan mereka keluar.

<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 perlu menyatakan bahwa Anda ingin menggunakan konteks pemformatan fleksibel dan tidak reguler blok dan tata letak sebaris. 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 fleksibel akan langsung mulai menunjukkan beberapa perilaku flexbox, menggunakan nilai awalnya.

Nilai awal berarti bahwa:

  • Item ditampilkan sebagai baris.
  • Tidak dapat dibungkus.
  • Mereka tidak berukuran untuk mengisi kontainer.
  • Mereka berbaris di awal container.

Mengontrol arah item

Meskipun Anda belum menambahkan properti flex-direction, item 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 ditata sebagai baris.
  • row-reverse: item disusun sebagai baris dari akhir penampung fleksibel.
  • column: item ditampilkan sebagai kolom.
  • column-reverse : item ditata sebagai kolom dari ujung 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 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. Penyusunan ulang hanya terjadi untuk urutan visual, bukan urutan logis. Hal ini penting untuk dipahami karena urutan logis adalah urutan yang akan dibacakan oleh {i>screen reader<i} konten, dan siapa pun yang menavigasi menggunakan {i>keyboard<i} akan mengikuti.

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 Flex 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 bekerja dengan mode penulisan vertikal, seperti beberapa {i>typeface<i} Jepang, maka baris akan bergerak 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 dalam bahasa Inggris, atau format horizontal lainnya, mode penulisan kiri ke kanan. Hal ini akan memudahkan asumsi bahwa item fleksibel sejajar di sebelah kiri, dan berjalan secara horizontal.

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

Diagram berlabel istilah di atas

Membungkus item fleksibel

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

Penampung fleksibel dengan sembilan item di dalamnya, item telah dikecilkan sehingga satu kata berada dalam satu baris tetapi tidak ada cukup ruang untuk menampilkannya secara berdampingan sehingga item fleksibel telah memanjang ke luar dari kotak container.
Setelah mereka mencapai ukuran minimum konten, item fleksibel akan mulai melebihi penampungnya

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 garis 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}.

Cara ringkas {i>flex-flow<i}

Anda dapat menetapkan properti flex-direction dan flex-wrap menggunakan singkatan flex-flow. Misalnya, untuk menetapkan flex-direction ke column dan mengizinkan item untuk 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 daripada flex-basis-nya.
  • flex-basis: auto: item memiliki ukuran dasar auto.

Ini dapat diwakili oleh nilai kata kunci flex: initial. Properti singkat flex, atau panjang dari flex-grow, flex-shrink, dan flex-basis diterapkan ke turunan dari flex container.

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. Ini menetapkan properti ke:

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

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 membuka:

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

Menggunakan flex: 1 berarti semua item memiliki ukuran nol, oleh karena itu semua ruang dalam kontainer fleksibel tersedia untuk didistribusikan. Karena semua item memiliki faktor flex-grow sebesar 1, semuanya bertambah secara merata dan ruang 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. Seiring item ini bertambah dari 0, ruang yang tersedia di penampung fleksibel akan 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 dari auto, meskipun Anda harus menentukan ketiganya masing-masing. 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
Secara default, flexbox akan memasukkan item ke dalam baris, menjajarkan di awal. Jika penggabungan diaktifkan, baris akan terus dibuat untuk alur turunan.
column
Menetapkan arah fleksibel ke kolom adalah cara yang bagus untuk menumpuk elemen, tetapi bukan nilai default-nya.

Secara default, penampung fleksibel menggabungkan turunan.

true
Pengemasan harus diaktifkan.
salah
Menggunakan flex-wrap: wrap dengan display: flex untuk menggabungkan turunan

Item turunan fleksibel tampak dibatasi, properti fleksibel manakah yang membantu mengurangi hal ini?

flex-grow
Properti ini menjelaskan apakah elemen dapat berkembang melebihi ukuran dasar, bukan bagaimana seharusnya berperilaku di bawah basis.
flex-shrink
Ya, properti ini menjelaskan cara menangani perubahan ukuran jika lebar berada di bawah dasar.
flex-basis
Cara ini memberikan titik awal dari penentuan ukuran, tetapi bukan cara menangani skenario ukuran di mana lebar berada di bawah dasar, seperti dalam skenario yang lebih sempit.

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 Anda menggunakan flexbox.

Kumpulan properti dapat ditempatkan ke dalam 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 satu kelompok pada sumbu silang.

Jika Anda mengerjakan sumbu utama, properti dimulai dengan justify-. Pada sumbu silang, keduanya diawali 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-item tersebut sejajar di awal dan setiap spasi tambahan berada di bagian 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 spasi 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 kosong di container saat bekerja sebagai kolom, Anda harus memberi container height atau block-size. Jika tidak, Anda tidak akan memiliki ruang kosong untuk mendistribusikan aplikasi.

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

Mendistribusikan ruang di antara garis fleksibel

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;
}

Cobalah di demo. Contoh ini memiliki barisan item {i>flex<i} yang digabungkan, dan container memiliki block-size agar kita memiliki ruang cadangan.

Singkatan place-content

Untuk menetapkan justify-content dan align-content, Anda dapat menggunakan place-content dengan salah satunya atau dua nilai. Satu nilai akan digunakan untuk kedua sumbu, jika Anda menentukan bahwa yang pertama digunakan untuk align-content dan yang 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 menyejajarkan item dalam garis fleksibel menggunakan align-items dan align-self. Ruang yang tersedia untuk perataan ini akan bergantung pada tinggi penampung fleksibel, atau garis fleksibel dalam kasus 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 mana pun.

.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 fleksibel untuk menetapkan semua properti align-self individual sebagai satu 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 kelompok 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 suatu kelompok, properti ini tidak diimplementasikan dalam konteks fleksibel.

Perlu diketahui bahwa flexbox berfungsi sangat baik dengan margin otomatis. Jika Anda merasa perlu untuk membagi 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 dapat didorong ke kanan, sehingga memisahkan kelompok.

Cara menempatkan item di tengah secara vertikal dan horizontal

Properti perataan dapat digunakan untuk menempatkan item di tengah di dalam kotak lain. Properti justify-content menyejajarkan item di sumbu utama, yang merupakan baris. Properti align-items di 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

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 menginginkan konten ukuran yang digunakan untuk item turunan, manakah dari gaya berikut yang akan Anda gunakan?

justify-content: flex-start
Properti rata-rata adalah untuk perataan horizontal, bukan vertikal.
align-content: start
content meratakan garis fleksibel, bukan perataan item turunan.
height: auto
Tindakan ini tidak akan berpengaruh.
align-items: flex-start
Ya, kita ingin menyelaraskannya secara vertikal ke bagian 'atas' atau start, yang akan menghapus nilai regangan default dan menggunakan tinggi konten.

Resource