Чӣ гуна муайян кардани хосиятҳои flexbox?

Молидоҳҳо барои контейнер (элементе, ки ба он display: flex ё display: inline-flex татбиқ мешавад) ва фарзандони мустақимаш (элементҳо дар дохили контейнер) муайян карда мешаванд.

Молидоҳҳо барои контейнер:

display: Муайян мекунад, ки элемент контейнери флекс аст. Қиматҳои имконпазир: flex (блокӣ) ва inline-flex (хаттӣ).
flex-direction: Самтро муайян мекунад, ки дар он flex-элементҳо ҷойгир мешаванд. Қиматҳои имконпазир: row (пешфарз, аз чап ба рост), row-reverse (аз рост ба чап), column (аз боло ба поён), column-reverse (аз поён ба боло).
flex-wrap: Идора мекунад, ки flex-элементҳо ба сатрҳои нав гузаранд, агар аз ҳад гузаранд. Қиматҳои имконпазир: nowrap (пешфарз, бе гузариш), wrap (гузариш ба сатрҳои нав), wrap-reverse (баръакс).
justify-content: Тартиб медиҳад, ки flex-элементҳо дарозии асосӣ чӣ гуна ҷойгир шаванд. Қиматҳои имконпазир: flex-start (сарҳади контейнер), flex-end (охир), center, space-between (фосилаи баробар байни элементҳо, аввал дар оғоз, охир дар охир), space-around (фосилаи баробар дар атрофи ҳар як элемент).
align-items: Тартиб медиҳад, ки flex-элементҳо дарозии кӯрсакӣ чӣ гуна ҷойгир шаванд. Қиматҳои имконпазир: stretch (пешфарз, элементҳоро дар баландии контейнер кашида мебарад), flex-start (сарҳад), flex-end (охир), center, baseline (тартиб додан ба хатти асосии матн).
align-content: Тартиб медиҳад, ки сатрҳои flex дарозии кӯрсакӣ чӣ гуна ҷойгир шаванд (ҳангоми истифодаи flex-wrap). Вайрон намешавад, агар танҳо як сатр бошад. Қиматҳои имконпазир: stretch, flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Фосилаҳоро байни элементҳо дар дарозии асосӣ ва кӯрсакӣ муайян мекунад.

Молидоҳҳо барои элементҳо (паҳлӯҳои мустақим):

order: Тартиби ҷойгиршавии элементро дар дохили контейнер муайян мекунад. Пешфарз, ҳама элементҳо order: 0 доранд. Элементҳо бо арзиши order камитар, пештар ҷойгир мешаванд.
flex-grow: Миқдори афзоишро муайян мекунад, агар ҷойи холӣ бошад. Пешфарз, 0 (наметавонад зиёд шавад).
flex-shrink: Миқдори кумакро муайян мекунад, агар ҷой кам бошад. Пешфарз, 1 (кам мешавад).
flex-basis: Андозаи ибтидоии элементро пеш аз тақсимоти ҷойи холӣ муайян мекунад. Мумкин аст дар пикселҳо, дар фоизҳо ё auto. Пешфарз, auto.
flex: кӯтоҳсозии хусусият барои flex-grow, flex-shrink ва flex-basis. Масалан, flex: 1 1 auto;.
align-self: Арзиши align-items барои ин элементро иваз мекунад. Қиматҳои имконпазир: auto, stretch, flex-start, flex-end, center, baseline.

Масалан:

.flex-container {
  display: flex; /* Элементро контейнери флекс мекунад */
  flex-direction: row; /* Элементҳоро дар сатр ҷойгир мекунад */
  justify-content: center; /* Элементҳоро дар маркази асосӣ ҷойгир мекунад */
  align-items: center; /* Элементҳоро дар маркази кӯрсакӣ ҷойгир мекунад */
  gap: 10px; /* Фосила байни элементҳоро муайян мекунад */
}

.flex-item {
  flex-grow: 1; /* Элемент метавонад зиёд шавад */
  flex-basis: 100px; /* Андозаи ибтидоии элемент */
}

.special-item {
  order: -1; /* Ин элемент аввал хоҳад буд */
  align-self: flex-end; /* Арзиши тартибро барои ин элемент иваз мекунад */
}