Ինչպես օգտագործել flexbox-ը էջի տարրերը դասավորելու համար։

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

Flexbox-ի հիմնական կոնցեպտը՝ flex-կոնտեյներ և նրա flex-միավորներ:

Flex-կոնտեյների հատկություններ (display: flex;):

• flex-direction: որոշում է flex-միավորների տեղադրման ուղղությունը (հիմնական առանցք):

  • row (նույնպես՝ ըստ նախնական կարգի): հորիզոնական, ձախից աջ:
  • row-reverse: հորիզոնական, աջից ձախ:
  • column: ուղղահայաց, վերևից ներքև:
  • column-reverse: ուղղահայաց, ներքևից վեր:

• flex-wrap: որոշում է, արդյոք flex-միավորները կանցնեն նոր տող, եթե տեղ չլինի:

  • nowrap (նույնպես՝ ըստ նախնական կարգի): բոլոր տարրերը մեկ տողում:
  • wrap: անցնում են նոր տող:
  • wrap-reverse: անցնում են նոր տող, բայց հակառակ հերթականությամբ:

• justify-content: հարթում է flex-միավորները հիմնական առանցքի վրա:

  • flex-start (նույնպես՝ ըստ նախնական կարգի): սկզբից:
  • flex-end: վերջից:
  • center: կենտրոնում:
  • space-between: հավասար տարածություն՝ միջեւ:
  • space-around: հավասար տարածություն՝ շուրջ:
  • space-evenly: հավասար տարածություն՝ միջեւ և շուրջ:

• align-items: հարթում է flex-միավորները հարթակի վրա:

  • stretch (նույնպես՝ եթե բարձրությունը կամ լայնությունը չեն սահմանված): բարձրացնում է տարրերը հարթակի վրա:
  • flex-start: սկզբին:
  • flex-end: վերջում:
  • center: կենտրոնում:
  • baseline: տեքստի հիմքի գիծ:

• align-content: հարթում է տողերը, երբ կա տեղափոխում (flex-wrap: wrap):

  • stretch (նույնպես՝ ըստ նախնական կարգի): գծում է տողերը:
  • flex-start: սկզբին:
  • flex-end: վերջում:
  • center: կենտրոնում:
  • space-between: հավասար տարածություն՝ միջեւ:
  • space-around: հավասար տարածություն՝ շուրջ:

• gap, row-gap, column-gap: սահմանում է տարածությունը տարրերի միջև:

.flex-container {
  display: flex; /* դարձնում է flex կոնտեյներ */
  flex-direction: row; /* տարրերը դասավորված են հորիզոնական */
  flex-wrap: wrap; /* տարրերը տեղափոխվում են նոր տող */
  justify-content: center; /* տարրերը կենտրոնում են հիմնական առանցքի վրա */
  align-items: center; /* տարրերը կենտրոնում են հարթակի վրա */
  gap: 10px; /* 10px տարածություն տարրերի միջև */
}

Flex-միավորների հատկություններ (ուղիղ ենթակառուցվածքներ):

• order: որոշում է, թե ինչպես կցուցադրվեն տարրերը՝ ըստ կարգի (նույնպես՝ 0): Փոքր արժեքները ցուցադրվում են առաջինը:

• flex-grow: որոշում է, թե որքանով է տարրը կարող է ընդլայնվել՝ ըստ մյուսների, տարածք զբաղեցնելու համար:

• flex-shrink: որոշում է, թե որքանով կարող է կրճատվել՝ եթե տարածքը քիչ է:

• flex-basis: որոշում է սկզբնական չափը՝ նախքան տարածքը բաժանելը:

• flex: կարճ ձև՝ միաժամանակ flex-grow, flex-shrink, flex-basis:

• align-self: վերականգնում է align-items-ի արժեքը՝ այս տարրին հատուկ:

.flex-item {
  order: 2; /* այս տարրը կլինի երկրորդ, անկախ HTML-կարգավորումից */
  flex-grow: 1; /* այս տարրը կզբաղեցնի մնացած տարածքը */
  flex-shrink: 0; /* այս տարրը չի կրճատվի */
  flex-basis: 100px; /* սկզբնական չափը 100px */
  align-self: flex-start; /* այս տարրի հարթում է սկզբից */
}

.another-item {
  flex: 1 1 auto; /* կարճ ձև՝ աճ: 1, կրճատում: 1, սկզբնական չափ: auto */
}

Flexbox-ը թույլ է տալիս ստեղծել տարբեր մենյուերներ՝ պարզից մինչև ավելի բարդ և ռեակցիոն, կառավարելով տարածքի բաժանումը և տարրերի հարթումը կոնտեյների մեջ։