1. Apa Itu Flexbox?

Flexbox atau Flexible Box Layout adalah sistem layout CSS yang digunakan untuk mengatur posisi dan ukuran elemen dalam sebuah container.

Dengan Flexbox kita dapat mengatur:

Posisi elemen secara horizontal
Posisi elemen secara vertikal
Jarak antar elemen
Perataan elemen
Urutan elemen
Ukuran elemen
Membuat layout responsive

Contoh sederhana:

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

CSS:

.container {
    display: flex;
}

Hasilnya:

+--------------------------------------+
| Box 1 | Box 2 | Box 3                 |
+--------------------------------------+

Tanpa Flexbox, elemen biasanya mengikuti perilaku normal HTML.

Dengan:

display: flex;

container berubah menjadi Flex Container.

2. Konsep Dasar Flexbox

Ada dua bagian utama:

Flex Container

Elemen induk yang menggunakan:

display: flex;

Flex Items

Elemen-elemen yang berada di dalam Flex Container.

Contoh:

<div class="container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

.container {
    display: flex;
}

Maka:

.container
     |
     +-- Box 1
     +-- Box 2
     +-- Box 3

.container = Flex Container

Box 1, Box 2, Box 3 = Flex Items

3. Membuat Flex Container

Sintaks paling dasar:

.container {
    display: flex;
}

Contoh lengkap:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Flexbox</title>

    <style>
        .container {
            display: flex;
        }

        .box {
            padding: 30px;
            background-color: lightblue;
            margin: 5px;
        }
    </style>
</head>

<body>

    <div class="container">

        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>

    </div>

</body>
</html>

4. Flex Direction

Property:

flex-direction

Digunakan untuk menentukan arah item.

Ada empat nilai utama:

row
row-reverse
column
column-reverse

4.1 row

Default Flexbox adalah:

flex-direction: row;

Contoh:

.container {
    display: flex;
    flex-direction: row;
}

Hasil:

Box 1 → Box 2 → Box 3

5. column

Kalau ingin elemen disusun dari atas ke bawah:

.container {
    display: flex;
    flex-direction: column;
}

Hasil:

Box 1
  ↓
Box 2
  ↓
Box 3

Ini sangat berguna untuk membuat layout mobile.

6. row-reverse

.container {
    display: flex;
    flex-direction: row-reverse;
}

Hasil:

Box 3 → Box 2 → Box 1

7. column-reverse

.container {
    display: flex;
    flex-direction: column-reverse;
}

Hasil:

Box 3
  ↓
Box 2
  ↓
Box 1

8. Main Axis dan Cross Axis

Ini konsep yang sangat penting dalam Flexbox.

Misalnya:

flex-direction: row;

Maka:

MAIN AXIS
──────────────────────────────→

Box 1   Box 2   Box 3

Sedangkan:

CROSS AXIS
     ↓
     ↓
     ↓

Jadi ketika:

flex-direction: row;

maka:

Main Axis = horizontal
Cross Axis = vertical

Sedangkan jika:

flex-direction: column;

maka:

Main Axis = vertical
Cross Axis = horizontal

Konsep ini penting untuk memahami:

justify-content
align-items

9. justify-content

Digunakan untuk mengatur posisi item pada Main Axis.

Contoh:

.container {
    display: flex;
    justify-content: center;
}

9.1 flex-start

justify-content: flex-start;

Hasil:

Box1 Box2 Box3

Item berada di awal.

9.2 center

justify-content: center;

Hasil:

        Box1 Box2 Box3

Item berada di tengah.

9.3 flex-end

justify-content: flex-end;

Hasil:

              Box1 Box2 Box3

9.4 space-between

justify-content: space-between;

Hasil:

Box1             Box2             Box3

Jarak di antara item dibuat merata.

9.5 space-around

justify-content: space-around;

Setiap item mendapatkan ruang di sekitarnya.

9.6 space-evenly

justify-content: space-evenly;

Jarak antar item dan jarak dengan sisi container dibuat sama.

10. align-items

align-items mengatur item pada Cross Axis.

Contoh:

.container {
    display: flex;
    align-items: center;
}

Misalnya:

.container {
    height: 300px;
    display: flex;
    align-items: center;
}

Item akan berada di tengah secara vertikal.

11. Kombinasi justify-content dan align-items

Ini salah satu teknik Flexbox yang paling sering digunakan.

Contoh:

.container {
    height: 500px;

    display: flex;

    justify-content: center;
    align-items: center;
}

Hasil:

+--------------------------------+
|                                |
|                                |
|          BOX                   |
|                                |
|                                |
+--------------------------------+

Elemen berada di tengah horizontal dan vertikal.

12. Case Study 1 — Membuat Kotak di Tengah

Mari kita buat dari awal.

Step 1 — HTML

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Center</title>
</head>

<body>

    <div class="container">

        <div class="box">
            Hello Flexbox
        </div>

    </div>

</body>
</html>

Step 2 — CSS

<style>

.container {
    height: 500px;

    display: flex;

    justify-content: center;
    align-items: center;
}

.box {
    padding: 40px;
    background-color: lightblue;
}

</style>

13. gap

Untuk membuat jarak antar Flex Items, kita dapat menggunakan:

gap

Contoh:

.container {
    display: flex;
    gap: 20px;
}

Hasil:

Box1   20px   Box2   20px   Box3

Ini lebih praktis daripada memberikan margin kepada setiap item.

14. flex-wrap

Secara default, Flexbox berusaha menempatkan item dalam satu baris.

Misalnya:

.container {
    display: flex;
}

Jika item terlalu banyak:

Box1 Box2 Box3 Box4 Box5 Box6 ...

Kita dapat menggunakan:

flex-wrap: wrap;

Contoh:

.container {
    display: flex;
    flex-wrap: wrap;
}

Hasilnya:

Box1 Box2 Box3 Box4
Box5 Box6 Box7 Box8

15. Case Study 2 — Card Produk

Sekarang kita membuat contoh yang lebih nyata.

HTML

<div class="container">

    <div class="card">
        <h3>HTML</h3>
        <p>Belajar HTML dari dasar.</p>
    </div>

    <div class="card">
        <h3>CSS</h3>
        <p>Belajar CSS dari dasar.</p>
    </div>

    <div class="card">
        <h3>JavaScript</h3>
        <p>Belajar JavaScript dari dasar.</p>
    </div>

</div>

CSS

.container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.card {
    width: 250px;
    padding: 20px;
    border: 1px solid #ddd;
}

Hasil:

+-------------+  +-------------+  +-------------+
| HTML        |  | CSS         |  | JavaScript  |
|             |  |             |  |             |
+-------------+  +-------------+  +-------------+

Jika layar mengecil, flex-wrap memungkinkan card turun ke baris berikutnya.

16. flex

Property:

flex

digunakan untuk mengatur bagaimana Flex Item menggunakan ruang yang tersedia.

Contoh:

.item {
    flex: 1;
}

Misalnya:

<div class="container">

    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>

</div>

.container {
    display: flex;
}

.box {
    flex: 1;
}

Ketiga box akan membagi ruang secara proporsional.

+------------+------------+------------+
|     A      |     B      |     C      |
+------------+------------+------------+

17. flex: 1 dan Perbandingan Ukuran

Misalnya:

.box1 {
    flex: 1;
}

.box2 {
    flex: 2;
}

Maka:

+---------+----------------+
| Box 1   |     Box 2      |
|         |                |
+---------+----------------+
    1             2

Box 2 mendapatkan ruang dua kali dibanding Box 1.

18. order

Kita juga bisa mengubah urutan Flex Item.

HTML:

<div class="container">

    <div class="box satu">A</div>
    <div class="box dua">B</div>
    <div class="box tiga">C</div>

</div>

CSS:

.tiga {
    order: -1;
}

Hasil:

C → A → B

Walaupun HTML-nya:

A → B → C

19. align-self

align-self digunakan untuk mengatur posisi satu item secara khusus.

Contoh:

.container {
    height: 300px;

    display: flex;
    align-items: center;
}

.box3 {
    align-self: flex-end;
}

Item lain berada di tengah, sedangkan Box 3 berada di bawah.

20. align-content

Property:

align-content

digunakan terutama ketika Flexbox memiliki beberapa baris karena:

flex-wrap: wrap;

Contoh:

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

Perlu dibedakan:

align-items
↓
mengatur item

align-content
↓
mengatur kumpulan baris

21. flex-flow

Kita dapat menggabungkan:

flex-direction

dan:

flex-wrap

menjadi:

flex-flow

Contoh:

.container {
    display: flex;
    flex-flow: row wrap;
}

Artinya:

direction = row
wrap      = wrap

Sama dengan:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

22. Properti Flexbox yang Perlu Dikuasai

Untuk Flex Container

Property	Fungsi
display	Mengaktifkan Flexbox
flex-direction	Menentukan arah
flex-wrap	Mengatur pembungkusan item
flex-flow	direction + wrap
justify-content	Mengatur Main Axis
align-items	Mengatur Cross Axis
align-content	Mengatur beberapa baris
gap	Jarak antar item

Untuk Flex Item

Property	Fungsi
flex	Mengatur fleksibilitas
flex-grow	Kemampuan membesar
flex-shrink	Kemampuan mengecil
flex-basis	Ukuran dasar
order	Mengubah urutan
align-self	Mengatur posisi item tertentu

CASE STUDY UTAMA

Membuat Landing Page Kursus dengan Flexbox

Sekarang kita gunakan semua konsep tadi untuk membuat sebuah layout nyata.

Target:

+------------------------------------------------+
| LOGO       HOME   KURSUS   TENTANG   KONTAK   |
+------------------------------------------------+

        BELAJAR KOMPUTER
     Dari Dasar Sampai Mahir

          [ MULAI BELAJAR ]

+-------------+ +-------------+ +-------------+
| HTML        | | CSS         | | JAVASCRIPT  |
| Dasar       | | Dasar       | | Dasar       |
+-------------+ +-------------+ +-------------+

Step 1 — Struktur HTML

<!DOCTYPE html>
<html>
<head>
    <title>Landing Page Kursus</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header>

        <div class="logo">
            Rumah Belajar
        </div>

        <nav>
            <a href="#">Home</a>
            <a href="#">Kursus</a>
            <a href="#">Tentang</a>
            <a href="#">Kontak</a>
        </nav>

    </header>


    <section class="hero">

        <div class="hero-text">

            <h1>
                Belajar Komputer
            </h1>

            <p>
                Belajar komputer dari dasar sampai mahir
                dengan metode praktis.
            </p>

            <button>
                Mulai Belajar
            </button>

        </div>

    </section>


    <section class="kursus">

        <h2>
            Pilihan Kursus
        </h2>

        <div class="kursus-container">

            <div class="card">

                <h3>
                    Microsoft Office
                </h3>

                <p>
                    Belajar Word, Excel dan PowerPoint.
                </p>

            </div>


            <div class="card">

                <h3>
                    Web Programming
                </h3>

                <p>
                    Belajar HTML, CSS, PHP dan MySQL.
                </p>

            </div>


            <div class="card">

                <h3>
                    Digital Marketing
                </h3>

                <p>
                    Belajar pemasaran digital.
                </p>

            </div>

        </div>

    </section>

</body>
</html>

Step 2 — CSS Header

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 20px 50px;

    background-color: #222;
}

Perhatikan:

display: flex;

membuat logo dan menu berada dalam satu baris.

Kemudian:

justify-content: space-between;

membuat:

LOGO                         MENU

Step 3 — CSS Navigation

nav {
    display: flex;
    gap: 20px;
}

nav a {
    color: white;
    text-decoration: none;
}

Dengan:

gap: 20px;

menu menjadi:

Home    Kursus    Tentang    Kontak

Step 4 — Hero Section

.hero {
    min-height: 500px;

    display: flex;

    justify-content: center;
    align-items: center;

    text-align: center;

    background-color: #f2f2f2;
}

Kita menggunakan:

justify-content: center;
align-items: center;

sehingga isi Hero berada di tengah.

Step 5 — Card Kursus

.kursus {
    padding: 60px 50px;
}

.kursus h2 {
    text-align: center;
}

.kursus-container {
    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    justify-content: center;
}

Sekarang card akan berjajar:

+---------+
| Card 1  |
+---------+

+---------+
| Card 2  |
+---------+

+---------+
| Card 3  |
+---------+

Karena Flexbox:

display: flex;

dan:

flex-wrap: wrap;

maka card bisa menyesuaikan ukuran layar.

Step 6 — CSS Card

.card {
    flex: 1;

    min-width: 250px;

    padding: 30px;

    border: 1px solid #ddd;

    border-radius: 10px;

    background-color: white;
}

Bagian penting:

flex: 1;

Ketiga card berusaha membagi ruang secara merata.

Sedangkan:

min-width: 250px;

memberikan ukuran minimum.

Step 7 — Responsive

Sekarang kita buat menu menjadi vertikal pada layar kecil.

@media (max-width: 600px) {

    header {
        flex-direction: column;

        gap: 20px;
    }

    nav {
        flex-direction: column;

        text-align: center;
    }

}

Pada desktop:

LOGO        HOME KURSUS TENTANG KONTAK

Pada mobile:

LOGO

HOME
KURSUS
TENTANG
KONTAK

23. Memahami Flexbox Secara Logika

Saat melihat sebuah layout, tanyakan 5 hal:

Pertanyaan 1

Siapa parent-nya?

Misalnya:

<div class="container">

Pertanyaan 2

Apakah parent menggunakan Flexbox?

.container {
    display: flex;
}

Pertanyaan 3

Ke arah mana item bergerak?

flex-direction: row;

atau:

flex-direction: column;

Pertanyaan 4

Bagaimana posisi pada Main Axis?

Gunakan:

justify-content

Pertanyaan 5

Bagaimana posisi pada Cross Axis?

Gunakan:

align-items

24. Rumus Sederhana Mengingat Flexbox

Cara paling mudah mengingat:

DISPLAY FLEX
     ↓
Membuat Flex Container
     ↓
FLEX-DIRECTION
     ↓
Menentukan arah
     ↓
JUSTIFY-CONTENT
     ↓
Mengatur Main Axis
     ↓
ALIGN-ITEMS
     ↓
Mengatur Cross Axis
     ↓
GAP
     ↓
Mengatur jarak

25. Latihan 1

Buat:

Box 1   Box 2   Box 3

dengan jarak 20px.

Gunakan:

display: flex;
gap: 20px;

26. Latihan 2

Buat Box berada tepat di tengah layar.

Gunakan:

display: flex;
justify-content: center;
align-items: center;

27. Latihan 3

Buat 6 card:

Card 1   Card 2   Card 3
Card 4   Card 5   Card 6

Gunakan:

display: flex;
flex-wrap: wrap;

28. Latihan 4

Buat layout:

LOGO                     MENU

Gunakan:

display: flex;
justify-content: space-between;
align-items: center;

29. Latihan 5 — Case Study

Buat halaman:

Kursus Komputer

dengan struktur:

HEADER
--------------------------------
Logo          Home Kursus Kontak


HERO
--------------------------------

Belajar Komputer
Dari Dasar Sampai Mahir

[ DAFTAR SEKARANG ]


KURSUS
--------------------------------

[ HTML ] [ CSS ] [ PHP ]


[ EXCEL ] [ WORD ] [ DIGITAL MARKETING ]

Ketentuan:

Gunakan HTML
Gunakan CSS
Wajib menggunakan Flexbox
Gunakan gap
Gunakan flex-wrap
Gunakan justify-content
Gunakan align-items
Buat responsive menggunakan media query

30. Kesimpulan

Untuk tahap awal, jangan menghafalkan semua property Flexbox sekaligus.

Kuasai urutan berikut:

display: flex;

kemudian:

flex-direction

kemudian:

justify-content

kemudian:

align-items

kemudian:

gap

kemudian:

flex-wrap

kemudian:

flex

Setelah konsep tersebut sudah dipahami, baru lanjut ke:

flex-grow
flex-shrink
flex-basis
order
align-self
align-content

Inti Flexbox sebenarnya hanya memahami hubungan antara Parent, Child, Main Axis, dan Cross Axis. Setelah empat konsep tersebut dikuasai, membuat navbar, card, hero section, pricing table, gallery, dan layout responsive akan jauh lebih mudah.

Post Views: 3

1. Apa Itu Flexbox?

2. Konsep Dasar Flexbox

Flex Container

Flex Items

3. Membuat Flex Container

4. Flex Direction

4.1 row

5. column

6. row-reverse

7. column-reverse

8. Main Axis dan Cross Axis

9. justify-content

9.1 flex-start

9.2 center

9.3 flex-end

9.4 space-between

9.5 space-around

9.6 space-evenly

10. align-items

11. Kombinasi justify-content dan align-items

12. Case Study 1 — Membuat Kotak di Tengah

Step 1 — HTML

Step 2 — CSS

13. gap

14. flex-wrap

15. Case Study 2 — Card Produk

HTML

CSS

16. flex

17. flex: 1 dan Perbandingan Ukuran

18. order

19. align-self

20. align-content

21. flex-flow

22. Properti Flexbox yang Perlu Dikuasai

Untuk Flex Container

Untuk Flex Item

CASE STUDY UTAMA

Membuat Landing Page Kursus dengan Flexbox

Step 1 — Struktur HTML

Step 2 — CSS Header

Step 3 — CSS Navigation

Step 4 — Hero Section

Step 5 — Card Kursus

Step 6 — CSS Card

Step 7 — Responsive

23. Memahami Flexbox Secara Logika

Pertanyaan 1

Pertanyaan 2

Pertanyaan 3

Pertanyaan 4

Pertanyaan 5

24. Rumus Sederhana Mengingat Flexbox

25. Latihan 1

26. Latihan 2

27. Latihan 3

28. Latihan 4

29. Latihan 5 — Case Study

30. Kesimpulan

Leave a Reply Cancel reply

Related Info

Tentang Soetrisno Galeri