Ի՞նչ է Flexbox-ը։

Flexbox (Flexible Box Layout) մոդելը CSS-ում միաչափ մոդել է, որը նախատեսված է տարածքի բաշխման համար կոնտեյների մեջ գտնվող տարրերի միջև և հզոր հարմարեցման հնարավորություններով: Այն հեշտությամբ կառավարում է դուստր տարրերի (flex-տարրերի) չափերը, կարգը և հարմարեցումը ծնողական կոնտեյների (flex-կոնտեյներ) ներսում, անկախ նրանց սկզբնական կարգից կամ չափից:

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

• Flex-контեյներ: Էлемент, որի համար սահմանված է display: flex կամ display: inline-flex: Այս կոնտեյներում սահմանվում են նրա ուղղահայաց տարրերի դասավորության կանոնները:
• Flex-տարրեր: Flex-контեյների ուղղակի երեխաները: Այս տարրերին կիրառվում են Flexbox հատկությունները, որոնք որոշում են նրանց վարքագիծը կոնտեյների ներսում:
• Հիմնական առանցք (main axis): Օրը, որի վրա դասավորվում են flex-տարրերը: Դեպի բնօրինակը հորիզոնական է (ձախից աջ), բայց կարող է փոխվել flex-direction հատկությամբ:
• Կտրուկ առանցք (cross axis): Օրը, որը հորիզոնական է հիմնական առանցքի նկատմամբ:
• Հիմնական սկզբում (main start) / Հիմնական վերջում (main end): Հիմնական առանցքի սկզբնամասը և վերջը:
• Կտրուկ սկզբում (cross start) / Կտրուկ վերջում (cross end): Կտրուկ առանցքի սկզբնամասը և վերջը:

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

• display: Որոշում է, որ տարրը լինի flex-контեյներ (flex կամ inline-flex):
• flex-direction: Որոշում է հիմնական առանցքի ուղղությունը (row, row-reverse, column, column-reverse):
• flex-wrap: Որոշում է, արդյոք flex-տարրերը կանցնեն նոր տող կամ սյունակ, եթե տեղը չի բավականացնում (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-տարրերի գծերի հարմարեցում (եթե նրանց մի քանի է flex-wrap-ի պատճառով):

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

• order: Flex-տարրի ցուցադրման կարգը (դեպքում՝ 0):
• flex-grow: Flex-տարրի աճի գործակիցը, որը որոշում է, թե որքան կարող է մեծանալ՝ լրացնելու համար հասանելի տարածքը:
• flex-shrink: Flex-տարրի սեղմման գործակիցը, որը որոշում է, թե որքան կարող է փոքրանալ՝ խուսափելու համար անցողությունից:
• flex-basis: Նախնական չափը՝ նախքան ազատ տարածքի բաշխումը:
• flex: Կարճ ձև՝ flex-grow, flex-shrink և flex-basis-ի համար:
• align-self: Փոխում է align-items-ը կոնկրետ flex-տարրի համար:

Օգտագործման օրինակ:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Կատարում է կոնտեյները flex-контեյներ */
  justify-content: center; /* Հիմնական առանցքի վրա կենտրոնավորում */
  align-items: center; /* Կտրուկ առանցքի վրա կենտրոնավորում */
  height: 200px; /* Նմուշի համար */
  border: 1px solid black;
}

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

Flexbox-ի հիմնական առավելությունները՝

• Հեշտ հարմարեցում հորիզոնական և ուղղահայաց ուղղություններով:
• Գնահատելի տարածքի բաշխում:
• Հեշտ փոփոխել տարրերի կարգը:
• Աдапտիվ դիզայն՝ առանց float և position օգտագործելու:
• Լավ աջակցություն ժամանակակից բրաուզերներում: