CSS Dasar #27 - Properti Flex Item: order, flex-grow, flex-shrink, flex-basis, align-self

byFerdian Rahabista -
0

Setelah kita mempelajari properti pada flex container (display, flex-direction, justify-content, align-items, flex-wrap, gap), sekarang saatnya memahami properti yang diterapkan pada flex item (anak). Properti ini memungkinkan kita mengatur perilaku individual setiap item, seperti urutan, kemampuan membesar/mengecil, ukuran dasar, dan perataan sendiri.

1. order (Mengatur Urutan)

Properti order mengatur urutan tampilan flex item. Nilai default adalah 0. Item dengan nilai order lebih kecil akan muncul lebih awal. Bisa bernilai negatif.

Sintaks: 
.item {
    order: 2; /* default 0 */
}

Contoh:

<style>
    .container {
        display: flex;
        background: #f0f4f8;
        padding: 10px;
    }
    .item {
        background: #3b82f6;
        color: white;
        padding: 15px;
        margin: 5px;
    }
    .item1 { order: 3; }
    .item2 { order: 1; }
    .item3 { order: 2; }
</style>

<div class="container">
    <div class="item item1">1 (order:3)</div>
    <div class="item item2">2 (order:1)</div>
    <div class="item item3">3 (order:2)</div>
</div>
1 (order:3)
2 (order:1)
3 (order:2)

Urutan tampilan berdasarkan nilai order (semakin kecil semakin awal). CSS order tidak mengubah urutan di HTML.

2. flex-grow (Membesar)

flex-grow menentukan seberapa besar item dapat membesar jika ada ruang tersisa di container. Nilai default adalah 0 (tidak membesar). Jika semua item memiliki flex-grow: 1, ruang dibagi merata.

Contoh:

<style>
    .container {
        display: flex;
        background: #f0f4f8;
        padding: 10px;
    }
    .item {
        background: #3b82f6;
        color: white;
        padding: 15px;
        margin: 5px;
    }
    .grow1 { flex-grow: 1; }
    .grow2 { flex-grow: 2; }
    .grow0 { flex-grow: 0; }
</style>

<div class="container">
    <div class="item grow1">grow:1</div>
    <div class="item grow2">grow:2</div>
    <div class="item grow0">grow:0</div>
</div>
grow:1
grow:2
grow:0

Item dengan flex-grow:2 mendapat ruang 2x lebih besar dari flex-grow:1.

3. flex-shrink (Mengecil)

flex-shrink menentukan seberapa besar item dapat mengecil jika ruang tidak cukup. Nilai default adalah 1 (bisa mengecil). Nilai 0 berarti item tidak akan mengecil.

Contoh:

<style>
    .container {
        display: flex;
        background: #f0f4f8;
        padding: 10px;
        width: 300px;
    }
    .item {
        background: #3b82f6;
        color: white;
        padding: 15px;
        margin: 5px;
        width: 150px;
    }
    .shrink1 { flex-shrink: 1; }
    .shrink0 { flex-shrink: 0; }
</style>

<div class="container">
    <div class="item shrink1">shrink:1</div>
    <div class="item shrink0">shrink:0</div>
</div>
shrink:1
shrink:0

Item dengan flex-shrink:0 tidak mengecil, menyebabkan overflow container.

4. flex-basis (Ukuran Dasar)

flex-basis menentukan ukuran awal item sebelum ruang dibagi oleh flex-grow/flex-shrink. Nilai default auto (ukuran berdasarkan konten atau width).

Contoh:

<style>
    .container {
        display: flex;
        background: #f0f4f8;
        padding: 10px;
    }
    .item {
        background: #3b82f6;
        color: white;
        padding: 15px;
        margin: 5px;
        flex-grow: 1;
    }
    .basis100 { flex-basis: 100px; }
    .basis200 { flex-basis: 200px; }
    .basis-auto { flex-basis: auto; }
</style>

<div class="container">
    <div class="item basis100">100px</div>
    <div class="item basis200">200px</div>
    <div class="item basis-auto">auto</div>
</div>
basis:80px
basis:120px
basis:auto

5. flex (Shorthand)

flex adalah shorthand untuk flex-grow, flex-shrink, dan flex-basis. Nilai umum:

  • flex: 1; → flex-grow:1, flex-shrink:1, flex-basis:0%
  • flex: 0 1 auto; → default
  • flex: none; → 0 0 auto

6. align-self (Override align-items)

align-self memungkinkan satu item memiliki perataan berbeda dari align-items container. Nilai: auto (ikuti container), flex-start, flex-end, center, baseline, stretch.

Contoh:

<style>
    .container {
        display: flex;
        align-items: flex-start;
        background: #f0f4f8;
        height: 150px;
        padding: 10px;
    }
    .item {
        background: #3b82f6;
        color: white;
        padding: 15px;
        margin: 5px;
    }
    .self-center { align-self: center; }
    .self-end { align-self: flex-end; }
</style>

<div class="container">
    <div class="item">default (flex-start)</div>
    <div class="item self-center">align-self:center</div>
    <div class="item self-end">align-self:flex-end</div>
</div>
default
center
flex-end

align-self mengesampingkan align-items container untuk item tertentu.

Contoh Proyek: Sidebar dengan Flex Item Properties

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Item - Demo Sidebar</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 40px 20px;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 30px;
        }
        h1 { text-align: center; margin-bottom: 20px; }
        .demo-section {
            margin: 30px 0;
            background: #f8fafc;
            border-radius: 12px;
            padding: 15px;
        }
        .flex-container {
            display: flex;
            background: #eef2ff;
            padding: 15px;
            margin: 10px 0;
            gap: 10px;
        }
        .item {
            background: #3b82f6;
            color: white;
            padding: 15px;
            text-align: center;
        }
        .order-item { order: 2; background: #22c55e; }
        .grow-item { flex-grow: 2; background: #f59e0b; }
        .shrink-item { flex-shrink: 0; width: 150px; background: #ef4444; }
        .self-item { align-self: center; background: #8b5cf6; }
        .info-box {
            background: #eef2ff;
            padding: 20px;
            border-radius: 12px;
            margin-top: 30px;
        }
        code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Properti Flex Item</h1>

        <div class="demo-section">
            <h2>1. order</h2>
            <div class="flex-container">
                <div class="item">1 (order:0)</div>
                <div class="item order-item">2 (order:2)</div>
                <div class="item">3 (order:0)</div>
            </div>
            <p>Item dengan order lebih kecil tampil lebih awal.</p>
        </div>

        <div class="demo-section">
            <h2>2. flex-grow</h2>
            <div class="flex-container">
                <div class="item">grow:1</div>
                <div class="item grow-item">grow:2 (2x)</div>
                <div class="item">grow:1</div>
            </div>
            <p>flex-grow:2 mendapat ruang 2x lebih besar.</p>
        </div>

        <div class="demo-section">
            <h2>3. flex-shrink</h2>
            <div class="flex-container" style="width: 300px;">
                <div class="item" style="width: 120px;">shrink:1</div>
                <div class="item shrink-item">shrink:0 (tidak mengecil)</div>
            </div>
            <p>flex-shrink:0 menyebabkan item tidak mengecil (overflow).</p>
        </div>

        <div class="demo-section">
            <h2>4. align-self</h2>
            <div class="flex-container" style="align-items: flex-start; height: 120px;">
                <div class="item">default</div>
                <div class="item self-item">align-self:center</div>
                <div class="item" style="align-self: flex-end;">flex-end</div>
            </div>
            <p>align-self mengesampingkan align-items container.</p>
        </div>

        <div class="info-box">
            <h3>Ringkasan Properti Flex Item</h3>
            <ul>
                <li><code>order</code> → urutan tampilan (default 0, lebih kecil lebih awal).</li>
                <li><code>flex-grow</code> → kemampuan membesar (0 = tidak membesar).</li>
                <li><code>flex-shrink</code> → kemampuan mengecil (1 = bisa mengecil).</li>
                <li><code>flex-basis</code> → ukuran dasar sebelum grow/shrink.</li>
                <li><code>flex</code> → shorthand untuk grow shrink basis.</li>
                <li><code>align-self</code> → override align-items untuk item tertentu.</li>
            </ul>
        </div>
    </div>
</body>
</html>

Hasil visual:

grow:1
grow:2
grow:1

Contoh flex-grow: item tengah mendapat ruang 2x lebih besar.

Kesalahan Umum

  • Lupa bahwa order hanya mengubah tampilan, bukan urutan DOM.
  • Mengira flex-grow membagi ruang secara proporsional tanpa memperhatikan flex-basis.
  • Menggunakan flex-shrink: 0 tanpa cukup ruang menyebabkan overflow horizontal.
  • Tertukar urutan pada shorthand flex: grow shrink basis.

Latihan Singkat

  1. Buat flex container dengan 3 item, atur order berbeda sehingga item ke-3 tampil pertama.
  2. Buat 4 item dengan flex-grow berbeda (1,2,1,1).
  3. Buat item yang tidak boleh mengecil (flex-shrink:0) pada container sempit.
  4. Gunakan align-self pada satu item untuk memusatkannya secara vertikal.

Intisari Hari Ini

  • order → mengatur urutan tampilan.
  • flex-grow → mengatur kemampuan membesar.
  • flex-shrink → mengatur kemampuan mengecil.
  • flex-basis → ukuran dasar item.
  • flex → shorthand (grow, shrink, basis).
  • align-self → mengesampingkan align-items container.
Tantangan: Buat halaman dengan sidebar lebar tetap (flex-shrink:0) dan konten utama yang fleksibel (flex-grow:1). Tambahkan navbar dengan order: 1, konten order: 2, footer order: 3.

Artikel Sebelumnya: CSS Dasar #26 - flex-wrap, flex-flow, dan gap
Artikel Selanjutnya: CSS Dasar #28 - Membuat Layout dengan Flexbox (Navbar, Card Grid, Footer)

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال