Tutorial css

CSS Flexbox

Flexbox (Flexible Box Layout) adalah sistem layout CSS yang sangat powerful untuk mengatur elemen dalam satu dimensi (horizontal atau vertikal). Flexbox membuat layout menjadi mudah, fleksibel, dan responsive.

Mengapa Belajar Flexbox?

Flexbox menyelesaikan masalah layout yang sulit seperti:

  • Centering element secara vertikal dan horizontal
  • Equal height columns tanpa JavaScript
  • Responsive navigation yang mudah
  • Space distribution yang otomatis
  • Order element tanpa mengubah HTML

Konsep Dasar Flexbox

Flex Container dan Flex Item

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

.flex-container {
  display: flex; /* Aktifkan flexbox */
}

Main Axis dan Cross Axis

Main Axis (default: horizontal)
←————————————————————————————————→

↑ Cross Axis
│ (default: vertical)
↓

Flex Container Properties

Display Flex

.container {
  display: flex; /* Inline flexbox */
  display: inline-flex; /* Block flexbox */
}

Flex Direction

.horizontal {
  flex-direction: row; /* Default: kiri ke kanan */
}

.horizontal-reverse {
  flex-direction: row-reverse; /* Kanan ke kiri */
}

.vertical {
  flex-direction: column; /* Atas ke bawah */
}

.vertical-reverse {
  flex-direction: column-reverse; /* Bawah ke atas */
}

Justify Content (Main Axis)

.start {
  justify-content: flex-start; /* Default: di awal */
}

.end {
  justify-content: flex-end; /* Di akhir */
}

.center {
  justify-content: center; /* Di tengah */
}

.space-between {
  justify-content: space-between; /* Space di antara */
}

.space-around {
  justify-content: space-around; /* Space di sekitar */
}

.space-evenly {
  justify-content: space-evenly; /* Space merata */
}

Align Items (Cross Axis)

.align-start {
  align-items: flex-start; /* Awal cross axis */
}

.align-end {
  align-items: flex-end; /* Akhir cross axis */
}

.align-center {
  align-items: center; /* Tengah cross axis */
}

.align-stretch {
  align-items: stretch; /* Default: stretch */
}

.align-baseline {
  align-items: baseline; /* Baseline text */
}

Flex Wrap

.no-wrap {
  flex-wrap: nowrap; /* Default: satu baris */
}

.wrap {
  flex-wrap: wrap; /* Wrap ke baris baru */
}

.wrap-reverse {
  flex-wrap: wrap-reverse; /* Wrap terbalik */
}

Flex Item Properties

Flex Grow

.item-1 {
  flex-grow: 0; /* Default: tidak tumbuh */
}

.item-2 {
  flex-grow: 1; /* Tumbuh 1x */
}

.item-3 {
  flex-grow: 2; /* Tumbuh 2x */
}

Flex Shrink

.no-shrink {
  flex-shrink: 0; /* Tidak menyusut */
}

.normal-shrink {
  flex-shrink: 1; /* Default: menyusut */
}

Flex Basis

.basis-auto {
  flex-basis: auto; /* Default: ukuran content */
}

.basis-fixed {
  flex-basis: 200px; /* Ukuran awal 200px */
}

.basis-percentage {
  flex-basis: 33.333%; /* Ukuran awal 33.333% */
}

Flex Shorthand

.item {
  flex: 1; /* flex: 1 1 0%; */
  flex: 1 0 auto; /* grow shrink basis */
  flex: none; /* flex: 0 0 auto; */
}

Align Self

.self-center {
  align-self: center; /* Override align-items */
}

.self-end {
  align-self: flex-end; /* Align individual item */
}

Contoh Praktis: Navigation Bar

<nav class="navbar">
  <div class="logo">MyBrand</div>
  <ul class="nav-links">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <button class="cta-button">Get Started</button>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #2c3e50;
  color: white;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #3498db;
}

.cta-button {
  padding: 0.5rem 1rem;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Contoh Praktis: Card Grid

<div class="card-grid">
  <div class="card">
    <h3>Service 1</h3>
    <p>Description of service 1</p>
  </div>
  <div class="card">
    <h3>Service 2</h3>
    <p>Longer description of service 2 that takes more space</p>
  </div>
  <div class="card">
    <h3>Service 3</h3>
    <p>Description of service 3</p>
  </div>
</div>

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem;
}

.card {
  flex: 1 1 300px; /* Minimum 300px, flexible */
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.card h3 {
  margin-top: 0;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.card p {
  color: #7f8c8d;
  line-height: 1.6;
  margin-bottom: 0;
}

Centering dengan Flexbox

Perfect Centering

.perfect-center {
  display: flex;
  justify-content: center; /* Horizontal center */
  align-items: center; /* Vertical center */
  min-height: 100vh; /* Full viewport height */
}

Card Centering

.center-card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.card {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  margin: 1rem;
}

Responsive Flexbox

.responsive-flex {
  display: flex;
  gap: 1rem;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
  .responsive-flex {
    flex-direction: column;
  }
}

/* Tablet: 2 columns */
@media (min-width: 769px) and (max-width: 1024px) {
  .responsive-flex > * {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

/* Desktop: 3 columns */
@media (min-width: 1025px) {
  .responsive-flex > * {
    flex: 1 1 calc(33.333% - 0.67rem);
  }
}

Flexbox vs Grid

Kapan Gunakan Flexbox?

✅ Gunakan Flexbox untuk:

  • Navigation bars
  • Button groups
  • Card layouts
  • Centering content
  • One-dimensional layouts

Kapan Gunakan Grid?

✅ Gunakan Grid untuk:

  • Complex 2D layouts
  • Magazine-style layouts
  • Dashboard layouts
  • Gallery grids

Common Flexbox Patterns

Sticky Footer

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  /* Header content */
}

.main {
  flex: 1; /* Takes remaining space */
}

.footer {
  /* Footer content */
}

Equal Height Columns

.columns {
  display: flex;
  gap: 2rem;
}

.column {
  flex: 1; /* Equal width & height */
  background: white;
  padding: 1rem;
}

Media Object

.media {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.media-image {
  flex-shrink: 0; /* Don't shrink image */
  width: 60px;
  height: 60px;
}

.media-body {
  flex: 1; /* Take remaining space */
}

Contoh Layout Lengkap

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Inter", sans-serif;
        line-height: 1.6;
        color: #333;
      }

      .page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      .header {
        background-color: #2c3e50;
        color: white;
        padding: 1rem 0;
      }

      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
      }

      .logo {
        font-size: 1.5rem;
        font-weight: bold;
      }

      .nav-links {
        display: flex;
        list-style: none;
        gap: 2rem;
      }

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

      .main {
        flex: 1;
        padding: 3rem 2rem;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
      }

      .hero {
        display: flex;
        align-items: center;
        gap: 3rem;
        margin-bottom: 4rem;
      }

      .hero-content {
        flex: 1;
      }

      .hero-image {
        flex: 1;
        background-color: #ecf0f1;
        height: 300px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .features {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        margin-bottom: 4rem;
      }

      .feature {
        flex: 1 1 300px;
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
      }

      .footer {
        background-color: #34495e;
        color: white;
        text-align: center;
        padding: 2rem;
      }

      @media (max-width: 768px) {
        .navbar {
          flex-direction: column;
          gap: 1rem;
        }

        .nav-links {
          gap: 1rem;
        }

        .hero {
          flex-direction: column;
          text-align: center;
        }
      }
    </style>
  </head>
  <body>
    <div class="page">
      <header class="header">
        <nav class="navbar">
          <div class="logo">FlexBox Demo</div>
          <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </header>

      <main class="main">
        <section class="hero">
          <div class="hero-content">
            <h1>Welcome to Flexbox</h1>
            <p>
              Learn modern CSS layout with flexible box model. Create
              responsive, beautiful layouts with ease.
            </p>
          </div>
          <div class="hero-image">
            <p>Hero Image</p>
          </div>
        </section>

        <section class="features">
          <div class="feature">
            <h3>Flexible</h3>
            <p>Elements adapt to available space automatically</p>
          </div>
          <div class="feature">
            <h3>Responsive</h3>
            <p>Works perfectly on all device sizes</p>
          </div>
          <div class="feature">
            <h3>Modern</h3>
            <p>Industry standard for layout in 2024</p>
          </div>
        </section>
      </main>

      <footer class="footer">
        <p>&copy; 2024 Flexbox Tutorial. Built with love and CSS.</p>
      </footer>
    </div>
  </body>
</html>

Debug Flexbox

Visualisasi dengan Border

.debug-flex * {
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.1);
}

.debug-flex .flex-container {
  border: 2px solid blue;
  background-color: rgba(0, 0, 255, 0.1);
}

Browser DevTools

  1. Inspect element yang menggunakan flexbox
  2. Look for Flexbox badge di Elements panel
  3. Click badge untuk melihat grid overlay
  4. Use Computed panel untuk melihat flex properties

Best Practices

1. Mobile First

.container {
  display: flex;
  flex-direction: column; /* Mobile: stack */
}

@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Desktop: horizontal */
  }
}

2. Meaningful Gaps

.flex-container {
  display: flex;
  gap: 1rem; /* Consistent spacing */
}

3. Avoid Fixed Heights

/* ❌ Avoid */
.item {
  height: 200px;
}

/* ✅ Better */
.item {
  min-height: 200px; /* Flexible height */
}

4. Use Semantic HTML

<!-- ✅ Good -->
<nav class="navbar">
  <main class="content">
    <section class="hero">
      <!-- ❌ Avoid -->
      <div class="navbar">
        <div class="content"></div>
      </div>
    </section>
  </main>
</nav>

Latihan Praktis

Coba buat:

  1. Responsive navigation dengan logo, menu, dan CTA button
  2. Card grid yang responsive dengan 1-4 columns
  3. Pricing table dengan equal height cards
  4. Dashboard layout dengan sidebar dan main content
  5. Landing page dengan hero section dan features

Tools untuk Flexbox

  1. Flexbox Froggy - flexboxfroggy.com (game belajar)
  2. Flexbox Defense - flexboxdefense.com (tower defense game)
  3. CSS Tricks Guide - css-tricks.com/snippets/css/a-guide-to-flexbox/
  4. Flexbox Cheatsheet - flexbox.malven.co

Kesimpulan

Flexbox adalah game changer untuk CSS layout. Dengan flexbox, Anda dapat:

  • Membuat layout kompleks dengan mudah
  • Responsive design tanpa media query yang rumit
  • Perfect centering dalam beberapa baris CSS
  • Equal height columns secara otomatis

Selanjutnya kita akan mempelajari CSS Grid - layout system yang lebih powerful untuk 2D layouts!