Flexbox-ը ինչ է?

Flexbox (Հակադարձ տուփի դասավորություն) — դա CSS մոդուլ է, որը նախատեսված է բարդ և արձագանքող դասավորություններ ստեղծելու համար: Այն թույլ է տալիս կառավարել տարրերի դասավորությունը, հարթեցումը և տարածության բաժանումը կոնտեյների միջև, նույնիսկ եթե նրանց չափերը անհայտ կամ դինամիկ են:

Flexbox-ի հիմնական գաղափարները՝

• Հիմնական առանց (main axis): Օս, որի վրա դասավորվում են տարրերը: Դեպքում՝ հորիզոնական (ձախից աջ):
• Կողմնային առանց (cross axis): Օս, որը հորիզոնական առանցքի Perpendicular է: Դեպքում՝ ուղղահայաց (վերևից ներքև):
• Կոնտեյներ (flex container): Էлемент, որի վրա կիրառվում են Flexbox հատկությունները (display: flex կամ display: inline-flex):
• Էլեմենտներ (flex items): Կոնտեյների դուստրեր՝ տարրեր:

Flexbox կոնտեյների հատկությունները՝

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

Flex-էլեմենտների հատկությունները՝

• order: Տարրերի հերթականությունը կոնտեյնում
• flex-grow: Քանի՞ տոկոսով պետք է մեծանա տարրը՝ լրացնելով հասանելի տարածքը
• flex-shrink: Քանի՞ տոկոսով պետք է փոքրանա՝ եթե տարածքը սահմանափակ է
• flex-basis: Սկզբնական չափը՝ նախքան տարածքի բաժանումը
• flex: Կրճատված հատկություն՝ flex-grow, flex-shrink և flex-basis
• align-self: Տարրի հարթեցումը փոխհատուցում է align-items-ը (flex-start, flex-end, center, baseline, stretch, auto)

Օրինակ՝

/* Կոնտեյներ */
.container {
  display: flex; /* Աշխատում է flexbox-ով */
  flex-direction: row; /* Էլեմենտները դասավորվում են շարքով */
  justify-content: center; /* Հորիզոնական կենտրոնում */
  align-items: center; /* Ուղղահայաց կենտրոնում */
  height: 200px; /* Կոնտեյների բարձրությունը */
  border: 1px solid black;
}

/* Էլեմենտներ */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox-ը զգալիորեն հեշտացնում է արձագանքող դասավորությունների ստեղծումը՝ համեմատած ավանդական մեթոդների (float, inline-block, table)։