Penggunaan Flexbox di CSS3

Tulisan ini bulum sepenuhnya selesai dan lengkap, namun akan terus diupdate jika penulis memiliki waktu luang.

Pada postingan kali ini saya akan membahas cara penggunaan Flexbox Di CSS3. Sebelum memulai ada baiknya Anda memahami terlebih dahulu apa itu Flexbox.

Apa Itu Flexbox ?

Flexbox (Flexible Layout) merupakan salah satu fitur baru di CSS3 yang bertujuan untuk menyediakan cara yang lebih efisien dalam mengatur tata letak komponen pada suatu dokumen html dengan menyelaraskan ruang antar item dalam suatu elemen meskipu ukurannya tidak diketahui.

Poin utama di balik Flexible Layout adalah untuk memberikan kemampuan untuk mengubah lebar / tinggi (dan urutan) item untuk mengisi ruang yang tersedia (sebagian besar untuk mengakomodasi semua jenis layar dan ukuran layar). Sebuah wadah fleksibel memperluas item untuk mengisi ruang kosong yang tersedia, atau mengecilkan mereka untuk mencegah overflow/melewati batas tinggi dan lebar dari wadah.

Yang paling penting, Flexbox layout adalah layout dengan arah-agnostik yang bertentangan dengan layout yang teratur (block yang berbasis vertikal dan inline yang berbasis horizontal). Sementara block dan inline layout bekerja dengan baik untuk halaman, namun layout ini tidak memiliki fleksibilitas untuk mendukung aplikasi yang besar atau kompleks (terutama ketika perubahan orientasi, perubahan ukuran, peregangan, menyusutan, dll).

Implementasi Flexbox Layout

Berikut ini adalah contoh dari katalog yang saya ambil dari w3.org di mana setiap item memiliki judul, foto, deskripsi, dan tombol pembelian. Tujuan desainernya adalah bahwa setiap entri memiliki ukuran keseluruhan yang sama, foto berada di atas teks, dan tombol pembelian selaras di bagian bawah, terlepas dari panjang deskripsi item. Flex layout membuat banyak aspek desain ini menjadi mudah:

• Katalog menggunakan Flexbox layout untuk meletakkan baris item horizontal, dan untuk memastikan bahwa item dalam baris semua sama-tingginya. Setiap entri kemudian memiliki wadah kolom flex sendiri, dan mengatur isinya secara vertikal.
• Dalam setiap entri, isi dokumen sumber disusun secara logis dengan judul pertama, diikuti oleh deskripsi dan foto. Ini menyediakan susunan yang masuk akal untuk speech rendering dan di browser non-CSS. Untuk presentasi visual yang lebih menarik, namun, agar digunakan untuk menarik gambar ke atas kemudian di isi ke atas, dan align-self digunakan untuk memperbaiki posisi horizontal.
• Margin auto atas tombol pembelian memaksanya ke bawah dalam setiap kotak entri, terlepas dari ketinggian deskripsi item ini.

#deals {
  display: flex;        /* Flex layout so items have equal height  */
  flex-flow: row wrap;  /* Allow items to wrap into multiple lines */
}
.sale-item {
  display: flex;        /* Lay out each item using flex layout */
  flex-flow: column;    /* Lay out item’s contents vertically  */
  flex-basis: 50%;      /* Lay out item's width is 50% relative to parent */
  
}
.sale-item > img {
  order: -1;            /* Shift image before other content (in visual order) */
  align-self: center;   /* Center the image cross-wise (horizontally)         */
}
.sale-item > button {
  margin-top: auto;     /* Auto top margin pushes button to bottom */
}

<section id="deals">
  <section class="sale-item">
    <h1>Computer Starter Kit</h1>
    <p>This is the best computer money can buy, if you don’t have much money.</p>
    <ul>
      <li>Computer</li>
      <li>Monitor</li>
      <li>Keyboard</li>
      <li>Mouse</li>
    </ul>
    <img src="https://www.w3.org/TR/css-flexbox-1/images/computer.jpg"
         alt="You get: a white computer with matching peripherals.">
    <button>BUY NOW</button>
  </section>
  <section class="sale-item">
    <h1>Printer</h1>
    <p>Only capable of printing ASCII art.</p>
    <ul>
      <li>Paper and ink not included.</li>
    </ul>
    <img src="https://www.w3.org/TR/css-flexbox-1/images/printer.png"
         alt="You get: a white computer with matching peripherals." />
    <button>BUY NOW</button>
  </section>
</section>

Output :

Computer Starter Kit

This is the best computer money can buy, if you don’t have much money.

• Computer
• Monitor
• Keyboard
• Mouse

Printer

Only capable of printing ASCII art.

• Paper and ink not included.

Karena flexbox adalah seluruh modul dan bukan satu properti, hal ini akan melibatkan banyak hal termasuk seluruh set properti. Beberapa dari mereka yang dimaksudkan untuk mengatur pada container/wadah (elemen induk, yang dikenal sebagai "wadah fleksibel") sedangkan yang lain dimaksudkan untuk mengatur child/anak dari container/wadah (item fleksibel).

Jika layout yang teratur didasarkan pada kedua blok dan aliran arah inline, layout fleksibel didasarkan pada flex-flow. Silakan lihat di gambar spesifikasi berikut, yang menjelaskan gagasan utama di balik layout fleksibel.
Pada dasarnya, item akan ditata mengikuti poros utama (dari main-start ke main-end) atau sumbu silang (dari cross-start ke cross-end).

• Sumbu Utama - Sumbu utama(Main Axis) container/wadah fleksibel adalah sumbu utama bersama dimana item fleksibel diletakkan. Hati-hati, arahnya tidak selalu horizontal, tergantung pada properti flex-flow.
• main-start | main-end - Item fleksibel ditempatkan dalam container/wadah mulai dari main-start ke main-end
.
• Ukuran Utama - lebar atau tinggi Item fleksibel, yang ada dalam dimensi utama, adalah ukuran utama item. Properti ukuran utama flex item adalah properti width atau height, yang ada dalam dimensi utama.
• Sumbu Cross - Sumbu tegak lurus dengan sumbu utama disebut sumbu cross. arahnya tergantung pada arah sumbu utama.
• cross-start | cross-end - garis Flex dipenuhi dengan item-item dan ditempatkan ke dalam container/wadah dimulai pada sisi cross-start container/wadah fleksibel menuju ke sisi cross-end.
• Ukuran Cross - Lebar atau tinggi dari item flex, dalam dimensi Cross, adalah ukuran cross item. Ukuran properti cross dari lebar atau tinggi yang ada di dimensi cross.

Properti Untuk elemen parent

(flex container)

display
Ini mendefinisikan sebuah wadah fleksibel; inline atau blok tergantung pada nilai yang diberikan.

.container {
  display: flex; /* or inline-flex */
}

Perlu dicatat bahwa kolom CSS tidak berpengaruh pada container/wadah fleksibel.

flex-direction

Properti ini menetapkan sumbu utama, sehingga menentukan arah item fleksibel ditempatkan dalam wadah fleksibel. Flexbox adalah (selain dari pembungkus opsional) konsep layout satu arah. Anggaplah item fleksibel sebagai tata letak utama baik dalam baris horizontal atau kolom vertikal.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (default): kiri ke kanan dalam ltr; kanan ke kiri dalam rtl
• row-reverse: kanan ke kiri dalam ltr; kiri ke kanan dalam rtl
• column: sama seperti row namun dari atas ke bawah
• column-reverse: sama seperti row-reverse namun dari bawah ke atas