Ի՞նչ նպատակով է օգտագործվում Flexbox-ը։

Flexbox-ը օգտագործվում է ճկուն և արձագանքող դասավորություններ ստեղծելու համար CSS-ում: Այն հեշտացնում է տարրերի հարմարեցումը և տարածման կարգավորումը կոնտեյներում, ավտոմատ կերպով կարգավորելով նրանց չափերը և դիրքը հասանելի տարածքի վրա հիմնված:

Flexbox-ի հիմնական հասկացությունները՝

• Flex կոնտեյներ: Էлемент, որի վրա կիրառվում է display: flex; կամ display: inline-flex;: Այն պարունակում է flex տարրեր:
• Flex տարրեր: Flex կոնտեյների անմիջական զավակները:

Flexbox-ը թույլ է տալիս վերահսկել՝

• Տարրերի դասավորության ուղղությունը (flex-direction)
• Տարրերի տեղափոխումը հաջորդ տող/սյուն (flex-wrap)
• Տարրերի հարմարեցումը գլխավոր առանցքի վրա (justify-content)
• Տարրերի հարմարեցումը հակառակ առանցքի վրա (align-items`` և align-content`)
• Տարրերի ցուցադրման կարգը (order)
• ազատ տարածքի բաշխումը տարրերի միջև (flex-grow, flex-shrink, flex-basis)

Բազային օգտագործման օրինակ՝

.container {
  display: flex;
  justify-content: center; /* Հորիզոնական կենտրոնացում */
  align-items: center; /* Վերևից կենտրոնացում */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

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