📦 CSS Flexbox Guide

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

.flex-basic {
  display: flex;
  gap: 10px;
}

.flex-item {
  flex: 1;
  padding: 15px;
  background: #667eea;
}

<div class="flex-direction-row">
  <div class="direction-item">1</div>
  <div class="direction-item">2</div>
  <div class="direction-item">3</div>
</div>

/* Row (ค่าเริ่มต้น) */
.flex-direction-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* Column */
.flex-direction-column {
  display: flex;
  flex-direction: column;
}

/* ชิดซ้าย */
justify-content: flex-start;

/* ชิดขวา */
justify-content: flex-end;

/* ตรงกลาง */
justify-content: center;

/* กระจายเต็ม */
justify-content: space-between;

/* กระจายเท่า */
justify-content: space-around;

/* กระจายเท่ากัน */
justify-content: space-evenly;

/* ยืดเต็ม (ค่าเริ่มต้น) */
align-items: stretch;

/* ชิดบน */
align-items: flex-start;

/* ชิดล่าง */
align-items: flex-end;

/* ตรงกลาง */
align-items: center;

/* ตาม baseline */
align-items: baseline;

<div class="flex-wrap">
  <div class="wrap-item">1</div>
  <div class="wrap-item">2</div>
  <!-- มีมากกว่า -->
</div>

/* ห้ามห่มเส้นโค้ง */
flex-wrap: nowrap;

/* อนุญาตห่มเส้นโค้ง */
flex-wrap: wrap;

/* ห่มเส้นโค้งทีละหลาย */
flex-wrap: wrap-reverse;

/* flex: grow shrink basis */

.grow-1 {
  flex: 1;
}

.grow-2 {
  flex: 2;
}

.grow-3 {
  flex: 3;
}

/* หรือใช้แยกกัน */
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0;

<div class="flex-order">
  <div class="order-item order-1">
    แรก (order: 3)
  </div>
  <div class="order-item order-2">
    ที่สอง (order: 1)
  </div>
  <div class="order-item order-3">
    ที่สาม (order: 2)
  </div>
</div>

.order-1 { order: 3; }
.order-2 { order: 1; }
.order-3 { order: 2; }

/* ลำดับเลขที่น้อย จะแสดงก่อน */

<div class="layout">
  <header class="header-flex">
    <div class="logo">Logo</div>
    <nav>...</nav>
  </header>

  <div class="main-content">
    <aside class="sidebar">
      Sidebar
    </aside>
    <main>
      <div class="cards-container">
        <div class="card">...</div>
      </div>
    </main>
  </div>
</div>

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-content {
  display: flex;
  gap: 15px;
}

.sidebar {
  flex: 0 0 200px;
}

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

.card {
  flex: 1 1 200px;
}