Flex дар CSS барои чӣ истифода мешавад?

Флексбокс барои эҷоди тақсимоти якмаврии элементҳо дар контейнер истифода мешавад. Он имкон медиҳад, ки ҳамоҳангсозӣ, тақсимоти фазо ва тартиби элементҳоро идора кунед.

Маълумоти асосӣ:

• Flex Container: унсури падар, ки ба он display: flex ё display: inline-flex дода мешавад.
• Flex Items: унсурҳои кӯдакии Flex Container.
• Main Axis: тираи асосии Flex Container. Бо хосият flex-direction муайян карда мешавад. Дар ҳолати пешфарз, уфуқӣ (row).
• Cross Axis: тираи канорӣ, перпендикуляр ба Main Axis.

Хусусиятҳои асосӣ барои Flex Container:

• display: муайян мекунад, ки унсур flex-контейнер аст (flex ё inline-flex).
• flex-direction: самтро муайян мекунад (row, row-reverse, column, column-reverse).
• justify-content: элементҳоро дар тираи асосӣ ҳамоҳанг мекунад (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: элементҳоро дар тираи канорӣ ҳамоҳанг мекунад (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: муайян мекунад, ки оё элементҳо ба сатр ё сутун нав мегузаранд (nowrap, wrap, wrap-reverse).

Хусусиятҳои асосӣ барои Flex Items:

• order: тартиби визуалӣ барои элементро муайян мекунад (аз пешфарз 0).
• flex-grow: муайян мекунад, ки чӣ қадар элемент метавонад дар муқоиса бо дигарон калон шавад (аз пешфарз 0).
• flex-shrink: муайян мекунад, ки чӣ қадар элемент метавонад дар муқоиса бо дигарон хурд шавад (аз пешфарз 1).
• flex-basis: андозаи ибтидоии элементро пеш аз тақсимоти фазои озод муайян мекунад (аз пешфарз auto).
• align-self: ҳамоҳангсозии элементро дар тираи канорӣ барои унсури алоҳида иваз мекунад.

Маслиҳат барои истифода:

.container {
  display: flex;
  justify-content: center; /* Ҳамоҳангсозӣ дар марказ дар тираи асосӣ */
  align-items: center; /* Ҳамоҳангсозӣ дар марказ дар тираи канорӣ */
  height: 200px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Ин имкон медиҳад, ки элементҳоро ба осонӣ марказонӣ кардан, шабакаҳои адаптивӣ эҷод кардан ва фазоро байни элементҳо идора кардан мумкин аст.