Bootstrap 4 Flexbox

CSS3 Flexible Box, atau Flexbox adalah sebuah mode layout baru yang berfungsi untuk meningkatkan penataan item pada suatu page yang juga dapat mengatur posisi dan keteraturan pada suatu container untuk mengakomodasi ukuran layout yang berbeda serta layout dengan device yang berbeda. Flexbox memiliki rule seperti model kotak yang memodifikasi lebar atau tinggi dari child item yang tersedia tanpa menggunakan floats.

Kebanyakan dari desainer dan developer menggunakan layout flexbox untuk dapat mengatur posisi elemen dengan mudah pada ukuran layout yang berberda dengan hanya menggunakan sedikit script. Ini dapat menghemat waktu dalam proses mendevelop.

Kabar gembira nya buat teman-teman yang telah terbiasa dengan flexbox, kini bootstrap 4 telah support dengan flexbox. Dalam tutorial ini, kita akan mencoba menerangkan bagaimana menggunakan bootstrap 4 dan cara mengaktifkan flexbox pada komponen grid di dalam bootstrap. Internet Explorer 9 tidak mendukung Flexbox, tetapi itu dapat ditambahkan pada bootstrap 4. Kamu hanya tinggal memasukan file _variable.scss yang terdapat pada folder scss.

Mengaktifkan Flexbox melalui _variables.scss

 Dengan menggunakan core file Sass di dalam paket Bootstrap 4, perhatikan variabel $enable-flex pada file _variables.scss. Secara default, variabel tersebut di set pada nilai false, jika Anda ubah menjadi true dan kemudian recompile, maka semua komponen grid akan beralih ke Flexbox dan Anda tidak membutuhkan penyesuaian pada sintaks HTML.

Mari kita coba sekarang. Disini kita akan menggunakan npm dan Grunt.js untuk recompile bootstrap.min.css, tetapi terserah pada Anda jika Anda memungkinkan menggunakan tools Sass compiler lainnya. Set variabel $enabeld-flex menjadi true dengan menggunakan command grunt sass (plugin grunt-contrib-sass) dalam terminal atau command prompt.

Ketika kita mengaktifkan Flexbox, maka itu akan secara otomatis mengkonversi masing-masing kolom ke dalam flex item yang sesuai dengan tinggi kolom. Seluruh sistem grid (mixins dan class-class yang telah di buat), beralih dari floats menjadi display: flex;

Perhatikan gambar berikut :

Adjusting Flexbox Layout

Dengan menggunakan properti flex-direction, kita dapat menentukan bagaimana item flex akan di tampilkan dalam container flexbox dengan mensetting direction axis pada container flex. Terdapat 2 direction yang dapat kita gunakan.

1. Row – menampilkan item flex secara horizontal.
2. Column – menampilkan item flex secara vertikal.

Perhatikan CSS dibawah ini, maka kita dapat menampilkan setiap item flexbox dari kiri ke kanan menempel disamping satu sama lain.

.row {

  -webkit-flex-direction: row;  /* Safari */

  flex-direction:  row-reverse;

}

Dengan menggunakan column kita dapat mengatur direction item flex menumpuk dalam kolom dari atas ke bawah.

.row {

  -webkit-flex-direction: row;  /* Safari */

  flex-direction:  column-reverse;

}

Anda juga dapat mengontrol bagaimana setiap item flexbox muncul di dalam container dengan menggunakan properti order menggunakan nilai integer.

Nilai negatif integer akan menempatkan item di sudut kiri container, sedangkan saat memberikan nilai integer positif akan maka akan menempatkan item ke sudut kanan. Nilai default adalah 0.

Dengan menggunakan HTML yang sama seperti yang kita buat diatas, tambahkan class item-* bersama dengan class col-lg-* untuk masing-masing kolom.

<div class="container">

    <div class="row">

        <div class="col-lg-3 item-1">

            <h3>Item 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

        <div class="col-lg-3 item-2">

            <h3>Item 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

        <div class="col-lg-3 item-3">

            <h3>Item 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

        </div>

        <div class="col-lg-3 item-4">

            <h3>Item 4</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

                <div class="col-lg-3 item-5">

            <h3>Item 5</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

        </div>

        <div class="col-lg-3 item-6">

            <h3>Item 6</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

        <div class="col-lg-3 item-7">

            <h3>Item 7</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

        </div>

        <div class="col-lg-3 item-8">

            <h3>Item 8</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

        

    </div>

</div>

 Sekarang mari kita coba membuat item 1, 2, 3 tampil dalam urutan 3, 2, 1 dan item 6, 7, 8 menjadi urutan 7, 8, 6 dengan menggunakan properti order.

.item-1{

    order: -1;

}

.item-2{

    order: 0;

}

.item-3{

    order: -2;

}

.item-6{

    order: 2;

}

.item-7{

    order: 0;

}

.item-8{

    order: 1;

}

Adjust Flex Item Alignment

Kita juga dapat meluruskan item flex sepanjang axis utama pada container flex dengan menggunakan properti justify-content.

Ada 3 value yang dapat kita gunakan :

1. flex-startb – meluruskan item flex ke sisi kiri pada container flex.
2. flex-end – meluruskan item flex ke sisi kanan pada container flex.
3. center – meluruskan item flex ke tengah pada container flex.

.row {

  -webkit-justify-content: flex-start; /* Safari */

  justify-content:   flex-start;

}

.row {

  -webkit-justify-content: flex-end; /* Safari */

  justify-content:   flex-end;

}

.row {

  -webkit-justify-content: center; /* Safari */

  justify-content:   center;

}

Comments

comments