CSS / Flex align ба justify

Flex align ба justify

Flexbox-ийн хамгийн хүчтэй тал нь элементүүдийг тэнхлэгийн дагуу зэрэгцүүлэх чадвар юм. Энэ хичээлд justify-content, align-items, align-self, align-content, gap property-уудыг практикаар судална.

Main axis ба cross axis

Flex container-д хоёр тэнхлэг байдаг:

Main axis — flex-direction-оор тодорхойлогдоно (анхдагч: horizontal/хэвтээ)
Cross axis — main axis-тай перпендикуляр (анхдагч: vertical/босоо)

css

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

justify-content — main axis дагуу зэрэгцүүлэх

css

.container {
  display: flex;

  justify-content: flex-start; /* зүүн талд (анхдагч) */
  justify-content: flex-end; /* баруун талд */
  justify-content: center; /* голд */
  justify-content: space-between; /* эхэн ба төгсгөлд наалдаж, хооронд тэнцүү зай */
  justify-content: space-around; /* бүх талдаа тэнцүү зай */
  justify-content: space-evenly; /* бүх цоорхой яг тэнцүү */
}

Жишээ — navigation bar:

css

.navbar {
  display: flex;
  justify-content: space-between; /* лого зүүн, товчнууд баруун */
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

align-items — cross axis дагуу зэрэгцүүлэх

css

.container {
  display: flex;
  height: 200px; /* өндөр тодорхой байх шаардлагатай */

  align-items: stretch; /* өндрийг container-тай тэнцүүлэх (анхдагч) */
  align-items: flex-start; /* дээд тал */
  align-items: flex-end; /* доод тал */
  align-items: center; /* босоо голд */
  align-items: baseline; /* текстийн baseline-аар */
}

Жишээ — элементийг яг голд байрлуулах:

css

.card {
  display: flex;
  justify-content: center; /* хэвтээ голд */
  align-items: center; /* босоо голд */
  height: 300px;
}

align-self — тухайн item-ийг тусгайлан зэрэгцүүлэх

align-items нь бүх item-д нэгэн зэрэг үйлчилдэг. Харин align-self нь зөвхөн нэг item-д үйлчилнэ:

css

.container {
  display: flex;
  align-items: center; /* бүх item голд */
}

.special-item {
  align-self: flex-end; /* энэ item дор байна */
}

html

<div class="container">
  <div>Голд байна</div>
  <div>Голд байна</div>
  <div class="special-item">Дор байна</div>
</div>

align-content — олон мөрийн зэрэгцүүлэлт

flex-wrap: wrap идэвхтэй байх үед олон мөрийг хэрхэн зэрэгцүүлэхийг тодорхойлно:

css

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;

  align-content: flex-start; /* мөрүүд дээд талд */
  align-content: flex-end; /* мөрүүд доод талд */
  align-content: center; /* мөрүүд голд */
  align-content: space-between; /* мөрүүдийн хооронд тэнцүү зай */
  align-content: space-around; /* мөрүүдийн эргэн тойронд тэнцүү зай */
  align-content: stretch; /* мөрүүд container-ийг дүүргэнэ (анхдагч) */
}

Анхаар: align-content нь зөвхөн flex-wrap: wrap үед ажиллана. Нэг мөртэй үед нөлөөгүй.

gap — item хоорондын зай

margin ашиглахгүйгээр item-үүдийн хоорондох зайг тохируулна:

css

.container {
  display: flex;
  gap: 16px; /* бүх тал 16px */
  gap: 16px 24px; /* row-gap 16px, column-gap 24px */
  row-gap: 16px; /* мөр хоорондын зай */
  column-gap: 24px; /* багана хоорондын зай */
}

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

Card grid — wrap хийсэн карт:

css

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.card {
  width: 280px;
  padding: 24px;
  background: #0f172a;
  border-radius: 12px;
}

Footer — гурван хэсэгт хуваасан:

css

.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 24px;
}

Нэвтрэх хуудас — голд байрлуулах:

css

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* дэлгэцийн бүтэн өндөр */
}

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

flex-wrap, flex-grow, flex-shrink, flex-basis, order property-уудыг судална. Flex item-ийн хэмжээ хэрхэн автоматаар тохируулагддагийг практикаар ойлгоно.

← Өмнөх хичээлFlexbox үндэс Дараах хичээл →Flex wrap ба order