Ի՞նչ նպատակով է օգտագործվում flex-ը CSS-ում:

Flexbox-ը օգտագործվում է միաչափ դասավորություններ ստեղծելու համար կոնտեյների մեջ։ Այն թույլ է տալիս կառավարել հարթեցումը, տարածության բաշխումը և տարրերի հերթականությունը։

Հիմնական հասկացություններ՝

• Flex Container: Պարենական տարր, որը ստանում է display: flex կամ display: inline-flex։
• Flex Items: Flex Container-ի երեխաներ։
• Main Axis: Flex Container-ի գլխավոր առանցքը։ Կարգավորվում է flex-direction հատկությամբ։ Դեպքում՝ հորիզոնական (row)։
• Cross Axis: Կողմնային առանցքը, որը հորիզոնական Main Axis-ի Perpendicular է։

Հիմնական հատկություններ՝

• display: Կարգավորում է, արդյոք տարրը flex-կոնտեյներ է (flex կամ inline-flex)։
• flex-direction: Կարգավորում է գլխավոր առանցքի ուղղությունը (row, row-reverse, column, column-reverse)։
• justify-content: Հարթեցնում է flex-երեսները գլխավոր առանցքով (flex-start, flex-end, center, space-between, space-around, space-evenly)։
• align-items: Հարթեցնում է flex-երեսները կողմնային առանցքով (flex-start, flex-end, center, baseline, stretch)։
• flex-wrap: Կարգավորում է, արդյոք flex-երեսները պետք է տեղափոխվեն նոր տող կամ սյունակ՝ տեղակալի պակասության դեպքում (nowrap, wrap, wrap-reverse)։

Հատկանիշներ՝

• order: Տեղադրում է տեսողական հերթականությունը flex-երեսների համար (առաջնական արժեքը՝ 0)։
• flex-grow: Կարգավորում է, թե որքանով է flex-երեսը կարող աճել մյուսների նկատմամբ (0)։
• flex-shrink: Կարգավորում է, թե որքանով է flex-երեսը կարող փոքրանալ մյուսների նկատմամբ (1)։
• flex-basis: Կարգավորում է սկզբնական չափը flex-երեսի՝ ազատ տարածքը բաժանելուց առաջ (auto)։
• align-self: Փոխում է առանձին flex-երեսի հարթեցումը կողմնային առանցքով։

Օրինակ՝

.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>

Այսպիսով՝ հեշտ է կենտրոնացնել տարրերը, ստեղծել ադապտիվ ցանցեր և կառավարել տարածությունը տարրերի միջև։