Ինչպես օգտագործել Flex-ը HTML տարրերը հավասարեցնելու համար

Դուք կարող եք նախագծել ավելի հզոր, հուսալի վեբ դասավորություններ՝ օգտագործելով CSS flexbox: Նույնիսկ հիմունքները մեծ հսկողություն են ապահովում էջի տարրերը դասավորելիս:

CSS-ի ճկուն հատկությունները թույլ են տալիս ավելի ճկուն և պատասխանատու կերպով դասավորել տարրերը: Սա օգտակար է դարձնում, երբ ցանկանում եք, որ ձեր HTML տարրերն ավելի արձագանքող լինեն վեբ բրաուզերի ներսում:

Այս հոդվածը կքննարկի, թե ինչպես կարող եք օգտագործել որոշակի ճկուն հատկություններ: Սա ներառում է flex-direction, justify-content, align-self, align-iters, align-content և gap հատկությունները:

Ինչպես կարգավորել CSS Flex Display-ը

Կառուցվածքի օրինակ, որը կարող եք օգտագործել flexbox-ի հիմունքները ուսումնասիրելու համար, միայնակ ծնող div-ի տակ գտնվող երեխաների div-ների հավաքածուն է: Ստորև բերված ծածկագրում կա հիմնական «ծնող» div. Երեք մանկական div-ները ներկայացնում են տարրեր, որոնք կարող եք հարթեցնել՝ օգտագործելով ճկուն հատկությունները:

<div class="parent">
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
</div>

Որպեսզի ցանկացած ճկուն ոճավորում աշխատի, դուք պետք է ավելացնեք display: flex հատկությունը մայր ֆլեքս կոնտեյների մեջ:

.parent {
  display: flex;
}

Առանց ճկունության, մանկական div-ները ցուցադրվում են մեկը մյուսի հետևից սյունակ ձևավորմամբ էջի ներքև:

Այս կարգավորումների օրինակ դիտելու համար դիտեք և գործարկեք կոդը այս CodePen հատվածում:

Ինչպես վերահսկել դասավորության ուղղությունը

flex-direction հատկությունը որոշում է երեխայի տարրերի տողի կամ սյունակի ուղղությունը:

Flex-direction հատկության տարբերակները ներառում են.

flex-direction: row | column | row-reverse | column-reverse

Դուք պետք է ավելացնեք հիմնական կոնտեյներ, որը շրջապատում է այն տարրերը, որոնք ցանկանում եք հավասարեցնել:

HTML:

<div class="parent">
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="purple"></div>
</div>

CSS:

.red { background-color:red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green { background-color: green;}
.blue { background-color: blue; }
.purple { background-color: purple; }

.parent div {
 width: 40px;
 height: 40px;
}

Կիրառեք flex-direction հատկությունը մայր ճկուն կոնտեյների վրա: Սա կհավասարեցնի երեխայի div տարրերը:

.parent {
 width: 300px;
 display: flex; 
 flex-direction: row;
}

Շատ ճկուն հատկություններ վերաբերում են հիմնական առանցքի և խաչաձև առանցքի հայեցակարգին: Երբ ճկուն ուղղությունը շար է, հիմնական առանցքը ներկայացնում է հորիզոնական ուղղությունը, իսկ խաչաձև առանցքը՝ ուղղահայացը: Սյունակի արժեքը փոխում է այս առանցքները:

Ինչպես հավասարեցնել իրերը խաչի առանցքի երկայնքով

align- Items հատկությունը վերահսկում է տարրերի հավասարեցումը խաչի առանցքի երկայնքով: Նախնական ճկուն ուղղության համար տողը, align-item-ը վերահսկում է տարրերի ուղղահայաց հավասարեցումը:

Align-iters սեփականության տարբերակները ներառում են.

align-items: flex-start | flex-end | align-items | stretch

Ավելացրեք align-ites հատկությունը մայր կոնտեյների մեջ՝ իր երեխաներին հավասարեցնելու համար:

.parent {
  display: flex; 
  align-items: flex-start;
}

Բացի այդ, դուք կարող եք ընտրել տարրերը հավասարեցնել՝ օգտագործելով բազային: Լռելյայնորեն, բազային տարբերակը հավասարեցնում է բոլոր տարրերը՝ հիմնվելով տարրերի հիմքի վրա:

Կարող եք նաև ընտրել, թե որտեղից է սկսվում ելակետը, օրինակ՝ վերևից (առաջին բազային) կամ ներքևից (վերջին բազային):

align-items: baseline | first baseline | last baseline;

Հավասարեցնել տարրերի համար. ելակետային գիծ աշխատելու համար, համոզվեք, որ յուրաքանչյուր տարր ունի տարբեր բարձրություն կամ լայնություն (կախված ձեր օգտագործած առանցքից):

<div class="parent">
  <div class="red" style="height:20px"></div>
  <div class="orange" style="height:60px"></div>
  <div class="yellow" style="height:30px"></div>
  <div class="green" style="height:90px"></div>
  <div class="blue" style="height:30px"></div>
  <div class="purple" style="height:50px"></div>
</div>

Ինչպե՞ս շրջել առանձին իրերի հավասարեցումը

Դուք կարող եք օգտագործել align-self հատկությունը՝ փոխարինելու հիմնական կոնտեյների ցանկացած align-iters ոճավորումը: Սա նշանակում է, որ դուք կարող եք սահմանել առանձին ճկուն հավասարեցում առանձին տարրի վրա:

Align-self հատկության տարբերակները ներառում են.

align-self: auto | flex-start | flex-end | center | baseline | stretch

Օրինակ, ասենք, որ մայր կոնտեյները ունի ճկուն ուղղության ոճավորում, որը սահմանված է «շարք»:

.parent {
  display: flex; 
  flex-direction: row;
}

Դուք կարող եք կիրառել align-self հատկությունը առանձին տարրի վրա: Առանձին տարրը կօգտագործի align-self հատկության ոճավորումը և կկենտրոնացնի տարրը մայր կոնտեյներով:

<div class="parent">
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green" style="align-self:center"></div>
  <div class="blue"></div>
  <div class="purple"></div>
</div>

Ինչպես բաշխել գծերը խաչի առանցքի միջով

align-content հատկությունը երեխաներին հավասարեցնում է ուղղահայաց առանցքի երկայնքով: Այն կարող է նաև որոշել մի քանի տողերի վրա գտնվող տարրերի միջև եղած տարածությունը:

Align-content հատկության տարբերակները ներառում են.

align-content: flex-start | flex-end | center | stretch | space-between | space-around

Ավելացրեք align-content հատկությունը մայր ֆլեքս կոնտեյների մեջ: align-content հատկությունը կաշխատի միայն այն դեպքում, եթե սահմանված է flex-wrap հատկությունը: Ավելացրե՛ք flex-wrap:wrap-ը մայր կոնտեյների մեջ և կրճատեք հիմնական div-ի լայնությունը՝ տարրերը մեկից ավելի տողերի վրա դնելու համար:

.parent {
  flex-wrap: wrap;
  display: flex;
  align-content: flex-start;
  width: 180px;
}

Ինչպես հավասարեցնել իրերը հիմնական առանցքի վրա

justify-content հատկությունը ավելացնում է աջ, ձախ կամ կենտրոնի հավասարեցում մանկական տարրերին: Այն նաև տարածում է իրերը՝ բովանդակությունը հիմնավորելիս դրանց միջև բացատներ ավելացնելով:

Justify-content գույքի տարբերակները ներառում են.

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Փաթաթեք այն իրերը, որոնք ցանկանում եք հավասարեցնել ծնողական ճկուն տարայի տակ:

HTML:

<div class="parent">
 <div class="red"></div>
 <div class="green"></div>
 <div class="blue"></div>
</div>

CSS:

.red { background-color: red; }
.green { background-color: lightgreen; }
.blue { background-color: blue; }

Ավելացրեք justify-content հատկությունը մայր ֆլեքս կոնտեյների մեջ:

.parent {
 width: 300px;
 display: flex; 
 justify-content: flex-start;
}

Justify-content հատկությունը նաև աջակցում է CSS Box Alignment ճշգրտման մեջ թվարկված արժեքներին: Սա ներառում է այնպիսի արժեքներ, ինչպիսիք են «սկիզբը», «վերջը», «ձախը» և «աջը»: Որոշ բրաուզերներ չեն աջակցում դրանք:

Justify-content հատկությունն ունի նաև «անվտանգ» հիմնաբառ, որը կարող եք օգտագործել: Սա ապահովում է, որ տարրերը փորձում են մնալ մայր կոնտեյների տիրույթում:

Այն նաև օգտագործվում է տվյալների կորուստը կանխելու համար, այն դեպքում, երբ դուք կենտրոնացնում եք երկար բառը: Անվտանգ բանալի բառի օգտագործումը թույլ չի տալիս, որ ավելի կարճ div-ը կտրի առաջին և վերջին տառերը:

.parent {
 display: flex; 
 justify-content: safe center;
}

Անվտանգ բանալի բառը նույնպես սահմանափակվում է որոշակի բրաուզերներով: Համատեղելիությունը կարող եք ստուգել «Կարող եմ օգտագործել»:

Ինչպես ավելացնել տարածություն տարրերի միջև

gap հատկությունը թույլ է տալիս ավելացնել որոշակի տարածություն տարրերի միջև: Դա CSS-ի նոր հնարավորություններից մեկն է, որը կարող է օգնել ձեզ ստեղծել պատասխանատու դասավորություն:

Կիրառեք gap հատկությունը մայր ֆլեքս կոնտեյների վրա:

.parent {
  display: flex;
  gap: 70px;
}

Եթե ավելացնեք մի բաց, որը ստիպում է տարրերի երկարությունը գերազանցել հիմնական լայնությունը, տարրերը կփոքրանան՝ փորձելով տեղավորվել շարքի ներսում:

.parent { 
    width: 300px;
    gap: 120px;
}

Եթե դուք օգտագործում եք flex-wrap: wrap՝ տարրերը նոր գիծ մղելու համար, ապա բացվածքի գումարը կկիրառվի նաև տողերի միջև ընկած տարածության վրա:

.parent { 
    width: 300px;
    flex-wrap: wrap;
    gap: 120px;
}

Բացի այդ, կարող եք նաև սահմանել row-gap և column-gap հատկությունները: Կրկին, դուք պետք է դրանք կիրառեք մայր ճկուն կոնտեյների վրա:

Տող-բացվածք հատկությունը որոշում է յուրաքանչյուր տողի միջև եղած տարածությունը: Սյունակ-բաց հատկությունը որոշում է յուրաքանչյուր սյունակի միջև եղած տարածությունը:

.parent { 
    row-gap: 120px; 
}
.parent { 
    column-gap: 120px; 
}

Օգտագործելով ավելի շատ Flex հատկություններ ձեր կայքում

Հուսանք, այժմ դուք ծանոթ եք տարբեր ճկուն հատկություններին, որոնք կարող եք օգտագործել ձեր վեբ էջի տարրերը հավասարեցնելու համար: Սա ներառում է, թե ինչպես կարող եք օգտագործել flex-direction, justify-content, align-self, align- items, align-content և gap հատկությունները:

Flexbox-ը դասավորության հզոր տեխնիկա է, բայց դա CSS-ի ընդամենը մի փոքր մասն է: Կարող եք նաև ծանոթանալ նոր CSS հատկությունների, մաքուր կոդավորման տեխնիկայի և CSS-ի օպտիմալացման համար օգտագործվող գործիքների մասին: