CSS / Flex wrap ба order

Flex wrap ба order

Энэ хичээлд flex item-ийн хэмжээ хэрхэн уян хатан өөрчлөгддөг, мөн дараалал яаж удирддаг талаар судална. flex-wrap, flex-grow, flex-shrink, flex-basis, order property-уудыг дэлгэрэнгүй авч үзнэ.

flex-wrap — мөр шилжүүлэх

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

css

.container {
  display: flex;

  flex-wrap: nowrap; /* нэг мөрт (анхдагч) */
  flex-wrap: wrap; /* хэрэгтэй бол дараагийн мөрт шилжинэ */
  flex-wrap: wrap-reverse; /* доороос дээш ороно */
}

Жишээ — responsive картууд:

css

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

.card {
  width: 240px; /* боломжтой бол 240px, багтахгүй бол мөр шилжинэ */
}

flex-basis — item-ийн үндсэн хэмжээ

Flex item-ийн анхны хэмжээг тохируулна. width-тай төстэй боловч flex-д зориулагдсан:

css

.item {
  flex-basis: auto; /* контентийн хэмжээгээр (анхдагч) */
  flex-basis: 200px; /* яг 200px */
  flex-basis: 33%; /* container-ийн 33% */
  flex-basis: 0; /* grow/shrink-ийг бүрэн удирдуулна */
}

flex-grow — нэмэлт зай дүүргэх

Container-д үлдсэн зай байвал item хэр их авах вэ гэдгийг тодорхойлно:

css

.item-a {
  flex-grow: 1;
} /* нэг хэсэг авна */
.item-b {
  flex-grow: 2;
} /* хоёр хэсэг авна — item-a-аас хоёр дахин өргөн */
.item-c {
  flex-grow: 0;
} /* нэмэлт зай авахгүй (анхдагч) */

Жишээ — search bar:

css

.search-bar {
  display: flex;
  gap: 8px;
}

.search-input {
  flex-grow: 1; /* бүх зайг дүүргэнэ */
}

.search-button {
  flex-grow: 0; /* өөрийн хэмжээгээр л байна */
  width: 80px;
}

flex-shrink — багасгах зэрэг

Container хэтэрхий жижиг болоход item хэр их жижгэрэх вэ гэдгийг тодорхойлно:

css

.item-a {
  flex-shrink: 1;
} /* пропорциональ жижгэрнэ (анхдагч) */
.item-b {
  flex-shrink: 2;
} /* item-a-аас хоёр дахин их жижгэрнэ */
.item-c {
  flex-shrink: 0;
} /* огт жижгэрэхгүй */

flex shorthand — товчилсон бичлэг

flex-grow, flex-shrink, flex-basis-ийг нэгтгэн бичнэ:

css

.item {
  /* flex: grow shrink basis */
  flex: 1 1 auto; /* анхдагч утгатай ижил */
  flex: 1; /* flex: 1 1 0 — хамгийн нийтлэг хэрэглэгддэг */
  flex: auto; /* flex: 1 1 auto */
  flex: none; /* flex: 0 0 auto — огт өөрчлөгдөхгүй */
}

flex: 1 — тэнцүү хуваарилах:

css

.container {
  display: flex;
}

.item {
  flex: 1; /* бүх item тэнцүү өргөнтэй болно */
}

order — дараалал өөрчлөх

HTML-ийн бичигдсэн дарааллыг өөрчлөхгүйгээр харагдах дарааллыг тохируулна:

css

.item-a {
  order: 2;
} /* 2-рт харагдана */
.item-b {
  order: 1;
} /* 1-рт харагдана (эхэнд) */
.item-c {
  order: 3;
} /* 3-рт харагдана */
/* анхдагч утга нь 0 — бага тоо нь эхэнд харагдана */

Жишээ — mobile дээр sidebar-ийг доош шилжүүлэх:

css

.layout {
  display: flex;
  flex-wrap: wrap;
}

.main-content {
  order: 1;
  flex: 1 1 400px;
}
.sidebar {
  order: 2;
  flex: 1 1 240px;
}

@media (max-width: 640px) {
  .main-content {
    order: 1;
  } /* mobile дээр мэдээлэл эхэнд */
  .sidebar {
    order: 2;
  } /* sidebar доод тал */
}

Responsive flex layout — бүрэн жишээ

css

/* Гар утас дээр нэг баганад, том дэлгэц дээр хажуу хажуугаар */
.profile {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.profile-avatar {
  flex: 0 0 120px; /* өөрчлөгдөхгүй, яг 120px */
}

.profile-info {
  flex: 1 1 240px; /* боломжтой бол ургана, хамгийн бага 240px */
}

html

<div class="profile">
  <img class="profile-avatar" src="avatar.jpg" alt="Профайл зураг" />
  <div class="profile-info">
    <h2>Бат-Эрдэнэ</h2>
    <p>Full-stack хөгжүүлэгч</p>
  </div>
</div>

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

CSS Grid-ийг танилцуулна. Grid нь хоёр хэмжээст layout бүтээхэд Flexbox-оос хавьгүй хүчтэй. display:grid, grid-template-columns, fr unit-ийг практикаар судална.

← Өмнөх хичээлFlex align ба justify Дараах хичээл →CSS Grid үндэс