CSS / Flexbox үндэс

Flexbox үндэс

Flexbox нь CSS layout-ийн хамгийн хэрэглэгдэх арга юм. Элементүүдийг хэвтээ эсвэл босоо байдлаар байрлуулах, зэрэгцүүлэх, жигд хуваарилахад зориулагдсан.

display: flex

Эцэг элементэд display: flex тохируулснаар тухайн элемент flex container болно. Шууд хүүхэд элементүүд нь автоматаар flex item болдог.

css

/* Flex container */
.nav {
  display: flex;
}

html

<nav class="nav">
  <a href="/">Нүүр</a>
  <!-- flex item -->
  <a href="/about">Тухай</a>
  <!-- flex item -->
  <a href="/blog">Блог</a>
  <!-- flex item -->
</nav>

Анхдагч байдлаар flex item-ууд хэвтээгээр зэрэгцэн байрладаг.

Main axis ба cross axis

Flexbox нь хоёр тэнхлэгтэй:

код

flex-direction: row (анхдагч)

main axis →→→→→→→→→→→→→→→→→
┌─────────┬─────────┬─────────┐
│ item 1  │ item 2  │ item 3  │  ↕ cross axis
└─────────┴─────────┴─────────┘

flex-direction: column

main axis
↓  ┌─────────┐
↓  │ item 1  │
↓  ├─────────┤
↓  │ item 2  │  ↔ cross axis
↓  ├─────────┤
↓  │ item 3  │
   └─────────┘

Main axis — flex item-ууд байрлах үндсэн тэнхлэг
Cross axis — main axis-т перпендикуляр тэнхлэг

flex-direction

Container-ийн main axis-ийн чиглэлийг тохируулна:

css

.container {
  display: flex;
  flex-direction: row; /* зүүнээс баруун (анхдагч) */
}

.container {
  flex-direction: row-reverse; /* баруунаас зүүн */
}

.container {
  flex-direction: column; /* дээрээс доош */
}

.container {
  flex-direction: column-reverse; /* доороос дээш */
}

Практик жишээ:

css

/* Хэвтээ навигац */
.navbar {
  display: flex;
  flex-direction: row; /* анхдагч тул бичихгүй ч болно */
  gap: 8px;
}

/* Босоо форм */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Карт дотор босоо агуулга */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

flex-wrap

Анхдагч байдлаар flex item-ууд нэг мөрт багтаж чадахгүй бол хумигддаг. flex-wrap нь шинэ мөрт шилжихийг зөвшөөрнө:

css

.grid {
  display: flex;
  flex-wrap: nowrap; /* хумигдана, мөр нэмэхгүй (анхдагч) */
}

.grid {
  flex-wrap: wrap; /* багтахгүй бол дараагийн мөрт орно */
}

.grid {
  flex-wrap: wrap-reverse; /* wrap, гэхдээ доороос дээш */
}

wrap ашигласан жишээ:

css

/* Картуудын тор */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card-grid .card {
  flex: 1 1 280px; /* хамгийн багадаа 280px, боломжтой бол өргөсч болно */
}

gap

Flex item-уудын хоорондох зайг тохируулна — margin ашиглахаас хялбар:

css

.nav {
  display: flex;
  gap: 16px; /* бүх хоорондох зай */
}

.layout {
  display: flex;
  column-gap: 24px; /* хэвтээ зай */
  row-gap: 16px; /* босоо зай (wrap үед) */
}

Flex container ба flex item харилцаа

Чухал ойлголт: flex property-нүүд хоёр түвшинд хуваагддаг.

Flex container-д тохируулах property-нүүд:

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  /* justify-content, align-items — дараагийн хичээлд */
}

Flex item-д тохируулах property-нүүд:

css

.item {
  flex-grow: 1; /* боломжтой зайг дүүргэх */
  flex-shrink: 1; /* хумигдах эсэх */
  flex-basis: auto; /* үндсэн хэмжээ */
  /* align-self — дараагийн хичээлд */
}

Нийтлэг layout жишээнүүд

css

/* 1. Хэвтээ навигац, лого зүүн — холбоосууд баруун */
.navbar {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar .logo {
  margin-right: auto; /* лого баруун зайгаа дүүргэнэ — холбоосуудыг баруун тийш түлхэнэ */
}

/* 2. Хоёр баганат layout */
.two-column {
  display: flex;
  gap: 32px;
}

.two-column .main {
  flex: 1; /* боломжтой бүх зайг эзэлнэ */
}

.two-column .sidebar {
  width: 240px; /* тогтмол өргөн */
  flex-shrink: 0; /* хумигдахаас хамгаалах */
}

/* 3. Голд байрлуулах */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Дараагийн хичээлд:

Flexbox-ийн хамгийн хүчирхэг хэрэгслүүд — justify-content, align-items, align-self, align-content property-уудыг дэлгэрэнгүй судалж, элементийг дурын байрлалд тохируулах практик жишээнүүдийг авч үзнэ.

← Өмнөх хичээлFixed ба sticky position Дараах хичээл →Flex align ба justify