Flexbox տարրերի դասավորություն. FlexBox-ի գործնական կիրառում։ #4 Հարմարվողական բլոկներ՝ օգտագործելով flex

գրողի մասինՌեյչել Էնդրյուն ոչ միայն Smashing Magazine-ի գլխավոր խմբագիրն է, այլև վեբ մշակող, գրող և խոսնակ: Նա մի շարք գրքերի հեղինակ է, այդ թվում Նոր CSS դասավորություն, Perch բովանդակության կառավարման համակարգի մշակողներից մեկը։ Գրում է բիզնեսի և տեխնոլոգիաների մասին իր rachelandrew.co.uk կայքում։

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

Արժեքներն աշխատում են նույն կերպ՝ ուղղահայաց, այսինքն՝ եթե ճկուն ուղղությունը կիրառվում է սյունակի վրա: Ճիշտ է, դուք կարող եք ազատ տարածություն չունենալ սյունակում բաշխման համար, եթե կոնտեյների վրա բարձրություն կամ բլոկի չափ չավելացնեք, ինչպես այս ցուցադրությունում:

Առանցքների հավասարեցում` օգտագործելով align-content

Եթե ​​բեռնարկղն ունի բազմաթիվ առանցքներ և ճկուն փաթաթում. wrap-ը նշված է, ապա align-content-ը կարող է օգտագործվել խաչաձև առանցքի վրա տողերը հավասարեցնելու համար: Բայց լրացուցիչ տարածք է պահանջվում: Այս ցուցադրությունում խաչաձև առանցքը աշխատում է սյունակի ուղղությամբ, և ես նշել եմ, որ կոնտեյների բարձրությունը պետք է լինի 60 վժ: Քանի որ սա ավելին է, քան անհրաժեշտ է բոլոր տարրերը ցուցադրելու համար, կա ազատ ուղղահայաց տարածություն:

Այնուհետև ես կարող եմ կիրառել align-content-ը որևէ մեկի հետ:

Եթե ​​flex-direction-ը սյունակ է, ապա align-content-ն աշխատում է ինչպես հետևյալ օրինակում:

Ինչպես justify-content-ի դեպքում, մենք աշխատում ենք մի խումբ տողերի հետ և ազատ տարածք ենք հատկացնում:

Գույքը ըստ տեղ-բովանդակության

Box Alignment ճշգրտման մեջ կարող եք գտնել տեղ-բովանդակություն հատկությունը: Այս հատկությունն օգտագործելը նշանակում է, որ դուք միաժամանակ սահմանում եք justify-content և align-content: Առաջին արժեքը align-content-ի համար է, երկրորդը՝ justify-content-ի համար: Եթե ​​նշված է միայն մեկ արժեք, ապա այն կիրառվում է երկու հատկությունների համար.

Բեռնարկղ (տեղ-բովանդակություն. տարածություն՝ ձգվողի միջև;)
Համապատասխանում է սրան.

Կոնտեյներ (հավասարեցնել-բովանդակությունը՝ բացատ-միջև; արդարացնել-բովանդակությունը՝ ձգվել; )
Եվ այս կոդը.

Բեռնարկղ (տեղ-բովանդակություն՝ տարածություն-միջև;)
Համարժեք է հետևյալին.

Կոնտեյներ ( align-content. space-between; justify-content: space-between;)

Առանցքների հավասարեցում` օգտագործելով align- items

Այժմ մենք գիտենք, որ կարող ենք միավորել տարրերի կամ տողերի մի շարք որպես խումբ: Այնուամենայնիվ, կա մեկ այլ եղանակ՝ տարրերը միմյանց նկատմամբ լայնակի առանցքի վրա հավասարեցնելու համար: Տարան ունի բարձրություն, որը որոշվում է ամենաբարձր տարրի բարձրությամբ:

Որպես այլընտրանք, այն կարող է սահմանվել կոնտեյների բարձրության հատկությամբ.

Ինչու են տարրերը ձգվում մինչև ամենաբարձր տարրի չափը, պայմանավորված է նրանով, որ align-items պարամետրի սկզբնական արժեքը ձգվում է: Տարրերը լայնակի առանցքի երկայնքով ձգվում են այդ ուղղությամբ տարայի չափին:

Նշենք, որ բազմաշերտ կոնտեյների մեջ յուրաքանչյուր տող հանդես է գալիս որպես նոր կոնտեյներ: Այդ շարքի ամենաբարձր տարրը կորոշի այդ շարքի բոլոր տարրերի չափը:

Բացի ձգվող մեկնարկային արժեքից, դուք կարող եք align-iters-ը սահմանել flex-start-ի վրա, որի դեպքում դրանք հավասարեցվում են տարայի սկզբին և այլևս չեն ձգվում բարձրությամբ:

Flex-end արժեքը դրանք տեղափոխում է կոնտեյների վերջը խաչի առանցքի երկայնքով:

Եթե ​​դուք օգտագործում եք արժեքի կենտրոնը, ապա տարրերը կենտրոնացած են միմյանց նկատմամբ.

Մենք կարող ենք նաև դրանք հավասարեցնել բազային: Սա ապահովում է, որ տեքստը հավասարեցվի նույն հիմքին, ի տարբերություն տեքստի շուրջ եզրագծերի հավասարեցման:

Այս բոլոր տարբերակները կարող են փորձարկվել ցուցադրական տարբերակով:

Պատվերով հավասարեցում align-self-ի հետ

Align-item հատկությունը սահմանում է բոլոր տարրերի հավասարեցումը միանգամից: Փաստորեն, այն սահմանում է ինքնահաստատման արժեքները խմբի բոլոր տարրերի համար: Դուք կարող եք նաև օգտագործել align-self հատկությունը ցանկացած առանձին տարրի վրա, որպեսզի այն հավասարեցվի գծի մեջ և հարաբերական այլ տարրերի հետ:

Հետևյալ օրինակը օգտագործում է կոնտեյներով հավասարեցնել տարրերը՝ ամբողջ խումբը կենտրոնացնելու համար, բայց նաև հավասարեցնել ինքն իրեն առաջին և վերջին տարրերի համար:

Ինչու չկա արդարացում:

Հաճախ հարց է առաջանում, թե ինչու հնարավոր չէ մեկ տարր կամ տարրերի խումբ դասավորել հիմնական առանցքի երկայնքով: Ինչու՞ Flexbox-ը չունի -self հատկություն հիմնական առանցքների հավասարեցման համար: Եթե ​​կարծում եք արդարացնել-բովանդակությունը և հավասարեցնել բովանդակությունը որպես տարածք հատկացնելու միջոց, պատասխանն ավելի ակնհայտ է դառնում: Մենք գործ ունենք տարրերի հետ որպես խումբ և ազատ տարածություն ենք տեղադրում որոշակի ձևով՝ կա՛մ խմբի սկզբում, կա՛մ վերջում, կա՛մ տարրերի միջև:

Կարող է նաև օգտակար լինել մտածել այն մասին, թե ինչպես են աշխատում justify-content-ը և align-content-ը CSS Grid Layout-ում: Grid-ում այս հատկություններն օգտագործվում են ցանցի կոնտեյների մեջ ազատ տարածք հատկացնելու համար: ցանցային ուղիների միջև. Այստեղ նույնպես մենք վերցնում ենք մի խումբ հետքեր, և օգտագործելով այս հատկությունները, մենք ազատ տարածություն ենք բաժանում նրանց միջև: Քանի որ մենք աշխատում ենք խմբով և՛ Grid-ում, և՛ Flexbox-ում, մենք չենք կարող վերցնել մեկ տարր և այլ բան անել դրա հետ: Այնուամենայնիվ, կա դասավորության ձևավորում ստանալու միջոց, որը ցանկանում են դասավորության դիզայներները, երբ խոսում են հիմնական առանցքի վրա սեփականության մասին: Սա ավտոմատ դաշտերի օգտագործումն է:

Ավտոմատ լուսանցքների օգտագործումը հիմնական առանցքի վրա

Եթե ​​դուք երբևէ կենտրոնացրել եք բլոկը CSS-ում (օրինակ՝ հիմնական էջի բովանդակության փաթաթում՝ ձախ և աջ լուսանցքները ավտոմատ դնելով), ապա դուք արդեն ունեք ավտոմատ լուսանցքների որոշակի փորձ: Ավտոմատի արժեքը լուսանցքների համար լրացնում է որքան հնարավոր է շատ տարածք նշված ուղղությամբ: Բլոկը կենտրոնացնելու համար մենք և՛ ձախ, և՛ աջ լուսանցքները դնում ենք ավտոմատի վրա՝ յուրաքանչյուրը փորձում է հնարավորինս շատ տեղ զբաղեցնել, հետևաբար տեղադրել մեր բլոկը կենտրոնում:

Ավտոմատ լուսանցքները շատ լավ են աշխատում Flexbox-ում՝ առանձին տարրերը կամ տարրերի խմբերը հիմնական առանցքի վրա հավասարեցնելու համար: Հետևյալ օրինակը ցույց է տալիս բնորոշ դեպք. Կա նավիգացիոն տող, տարրերը ցուցադրվում են որպես տող և օգտագործում են սկզբնական արժեքը justify-content՝ start ։ Ես ուզում եմ, որ վերջին տարրը մյուսներից առանձին հայտնվի տողի վերջում՝ պայմանով, որ տողում բավականաչափ տեղ կա, որպեսզի դա տեղի ունենա:

Մենք վերցնում ենք այս տարրը և սահմանում ենք «magin-left» հատկությունը «auto»: Սա նշանակում է, որ տուփը փորձում է հնարավորինս շատ տարածություն ստանալ տարրի ձախ կողմում, այսինքն՝ տարրը մղվում է դեպի աջ եզր:

Եթե ​​դուք օգտագործում եք ավտոմատ լուսանցքներ հիմնական առանցքի վրա, ապա justify-content-ը այլևս ազդեցություն չի ունենա, քանի որ ավտոմատ լուսանցքները կզբաղեցնեն ողջ տարածքը, որը այլապես կհատկացվեր justify-content-ի միջոցով:

Պահեստային հավասարեցում

Հավասարեցման յուրաքանչյուր մեթոդի համար նկարագրվում է հետադարձ կապ. ինչ տեղի կունենա, եթե նշված հավասարեցումը հնարավոր չէ: Օրինակ, եթե կոնտեյներում ունեք միայն մեկ տարր, և նշեք justify-content՝ space-between, ի՞նչ պետք է տեղի ունենա: Այս դեպքում կիրառվում է flex-start հետադարձ հավասարեցում. մեկ տարր կհավասարեցվի տարայի սկզբում: Արդարացնել-բովանդակության դեպքում՝ տարածություն շուրջը, հետադարձ հավասարեցումը կենտրոնում է:

Ընթացիկ բնութագրում դուք չեք կարող փոխել հետադարձ հավասարեցումը: Կա հստակեցման նշում, որը թույլ է տալիս հետագա տարբերակներում կամայական հետադարձ նշելու հնարավորությունը:

Անվտանգ և անապահով հավասարեցում

Box Alignment ճշգրտման վերջին լրացումը անվտանգ և անապահով հավասարեցման հայեցակարգն է՝ օգտագործելով հիմնաբառեր ապահովԵվ անապահով.

Հետևյալ կոդում վերջին տարրը չափազանց լայն է կոնտեյների համար, և էջի ձախ կողմում գտնվող անապահով հավասարեցմամբ և ճկուն կոնտեյներով տարրը կտրված է, քանի որ հորդառատությունը դուրս է գալիս էջի սահմաններից:

Կոնտեյներ ( էկրան՝ ճկուն, ճկուն ուղղություն՝ սյունակ, լայնություն՝ 100 պիքսել; հավասարեցրեք տարրերը՝ անապահով կենտրոն; ) .item:last-child ( լայնությունը՝ 200px; )


Անվտանգ հավասարեցումը կանխում է տվյալների կորուստը՝ արտահոսքը մյուս կողմ տեղափոխելով:

Կոնտեյներ ( էկրան՝ ճկուն, ճկուն ուղղություն՝ սյունակ, լայնություն՝ 100 պիքսել; հավասարեցրեք տարրերը՝ անվտանգ կենտրոն; ) .item:last-child ( լայնությունը՝ 200px; )


Այս հիմնաբառերը դեռ չեն աջակցվում բոլոր բրաուզերների կողմից, սակայն ցույց են տալիս, թե ինչպես են Box Alignment բնութագրերը Flexbox-ին վերահսկողություն ավելացնում:

Եզրակացություն

Հավասարեցման հատկությունները սկսվել են որպես ցուցակ Flexbox-ում, բայց այժմ ունեն իրենց առանձնահատկությունները և կիրառվում են դասավորության այլ համատեքստերում: Ահա մի քանի հիմնական փաստեր, որոնք կօգնեն ձեզ հիշել դրանց օգտագործումը Flexbox-ում.

• հիմնավորել - հիմնական առանցքների համար և հավասարեցնել - լայնակի առանցքների համար.
• align-content-ը և justify-content-ը պահանջում են ազատ տարածք;
• align-content և justify-content հատկությունները կիրառվում են խմբի տարրերի վրա՝ տարածելով նրանց միջև: Դուք չեք կարող նշել առանձին տարրի հավասարեցումը, քանի որ -self հատկությունը բացակայում է.
• եթե ցանկանում եք հավասարեցնել մեկ տարր կամ բաժանել խումբը հիմնական առանցքի երկայնքով, օգտագործեք ավտոմատ դաշտերը.
• align-item-ը սահմանում է նույն align-self հատկությունները ամբողջ խմբի համար: Օգտագործեք align-self-ը խմբի երեխայի տարրի վրա՝ դրա արժեքը անհատապես սահմանելու համար:

Բովանդակություն:

Flexboxէջի վրա բլոկներ դասավորելու նոր միջոց է։ Սա տեխնոլոգիա է, որը ստեղծվել է հատուկ տարրերի տեղադրման համար, ի տարբերություն լողացողների: Օգտագործելով FlexboxԴուք կարող եք հեշտությամբ հարթեցնել տարրերը հորիզոնական և ուղղահայաց, փոխել տարրերի ցուցադրման ուղղությունը և կարգը, ձգել բլոկները մինչև հիմնական բարձրությունը կամ գամել դրանք ներքևի եզրին:

UPD 02/02/2017-ից:Ես պատրաստեցի հարմար խաբեության թերթիկ Flexbox-ում, կենդանի ցուցադրություններով և նկարագրություններով՝ Flexbox cheatsheet-ից:

Օրինակները օգտագործում են միայն նոր շարահյուսությունը։ Գրելու պահին դրանք առավել ճիշտ են ցուցադրվում Chrome. Firefox-ում մասնակի են աշխատում, Safari-ում ընդհանրապես չեն աշխատում։

Ըստ caniuse.com-ի՝ Flexboxչի աջակցվում IE 8-ի և 9-ի և Opera Mini-ի կողմից, իսկ այլ բրաուզերներում ոչ բոլոր հատկություններն են աջակցվում և/կամ պահանջվում են նախածանցներ:

Սա նշանակում է, որ տեխնոլոգիան չի կարող լայնորեն կիրառվել հենց հիմա, բայց հիմա այն ժամանակն է ավելի լավ ճանաչելու:

Նախ պետք է իմանալ, որ ճկուն տարրերը դասավորված են առանցքների երկայնքով: Լռելյայնորեն տարրերը դասավորված են հորիզոնական՝ երկայնքով հիմնական առանցքը- հիմնական առանցք.

Պետք է նաև նկատի ունենալ, որ օգտագործելիս Flexbox float , clear և vertical-align-ը չեն աշխատում ներքին բլոկների, ինչպես նաև տեքստում սյունակներ սահմանող հատկությունների համար:

Եկեք փորձարկումների համար փորձադաշտ պատրաստենք.

Մեկ ծնող բլոկ (դեղին) և 5 մանկական բլոկ:

Էկրան՝ ճկուն

Եվ հիմա մենք ավելացնում ենք ցուցադրում՝ flex; . Ներքին դիվիզները շարված են (հիմնական առանցքի երկայնքով) նույն բարձրության սյուներով՝ անկախ բովանդակությունից։

ցուցադրում: flex; Դարձնում է բոլոր մանկական տարրերը ճկուն, այլ ոչ թե ներգծային կամ բլոկի վրա հիմնված, ինչպես սկզբում էր:

Եթե ​​մայր բլոկը պարունակում է պատկերներ կամ տեքստ առանց փաթաթման, դրանք դառնում են անանուն ճկուն տարրեր:

Ցուցադրել սեփականությունը Flexboxկարող է ունենալ երկու իմաստ.

flex - իրեն պահում է որպես բլոկի տարր: Բլոկների լայնությունը հաշվարկելիս առաջնահերթություն է տրվում դասավորությանը (եթե բլոկները բավականաչափ լայն չեն, բովանդակությունը կարող է գերազանցել սահմանները):

inline-flex - իրեն պահում է ինչպես inline block: Բովանդակությունն ունի առաջնահերթություն (բովանդակությունը տարածում է բլոկները անհրաժեշտ լայնությամբ, որպեսզի գծերը տեղավորվեն, եթե հնարավոր է):

Flex-direction

Բլոկի դասավորության ուղղությունը վերահսկվում է flex-direction հատկությամբ:

Հնարավոր արժեքներ.

տող - տող (կանխադրված արժեք); row-reverse - հակադարձ կարգով տարրեր ունեցող շարք; սյունակ - սյունակ; սյունակ-հակադարձ - սյունակ, որի տարրերը հակառակ հերթականությամբ են:

տող և տող-հակադարձ

սյունակ և սյունակ-հակադարձ

Flex-փաթաթել

Մեկ տողում կարող են լինել շատ բլոկներ: Նրանք փաթաթում են, թե ոչ, որոշվում է flex-wrap հատկությամբ:

Հնարավոր արժեքներ.

nowrap - բլոկները չեն փոխանցվում (կանխադրված արժեք); փաթաթան - բլոկները փոխանցվում են; wrap-reverse - բլոկները փաթաթված են և տեղադրվում են հակառակ կարգով:

Flex-direction և flex-wrap հատկությունների սղագրությունը հատկությունն է՝ flex-flow :

Հնարավոր արժեքներ. կարող եք սահմանել երկու հատկությունները կամ միայն մեկը: Օրինակ:

flex-flow: սյունակ; flex-flow: wrap-reverse; flex-flow: սյունակ-հակադարձ փաթաթան;

Դեմո տող-reverse wrap-reverse.

Պատվեր

Բլոկների հերթականությունը վերահսկելու համար օգտագործեք պատվերի հատկությունը:

Հնարավոր արժեքներ՝ թվեր: Բլոկը առաջինը դնելու համար կարգադրեք՝ -1:

Հիմնավորել-բովանդակություն

Տարրերը հավասարեցնելու մի քանի հատկություններ կան՝ justify-content, align-items և align-self:

justify-content and align- items կիրառվում են ծնող կոնտեյների վրա, align-self կիրառվում է երեխաների համար:

justify-content-ը պատասխանատու է հիմնական առանցքի հավասարեցման համար:

Արդարացնել-բովանդակության հնարավոր արժեքները.

flex-start - տարրերը դասավորված են հիմնական առանցքի սկզբից (կանխադրված արժեք); flex-end - տարրերը դասավորված են հիմնական առանցքի վերջից. կենտրոն - տարրերը հավասարեցված են հիմնական առանցքի կենտրոնին. տարածություն-միջև - տարրերը դասավորված են հիմնական առանցքի երկայնքով ՝ միմյանց միջև ազատ տարածություն բաշխելով. տարածություն շուրջը - տարրերը դասավորված են հիմնական առանցքի երկայնքով, նրանց շուրջ ազատ տարածություն բաշխելով:

flex-start և flex-end

տարածություն-միջև, տարածություն շուրջը

Հավասարեցնել-իրերը

align-iters-ը պատասխանատու է ուղղահայաց առանցքի երկայնքով հավասարեցնելու համար:

Հավասարեցնել տարրերի հնարավոր արժեքները.

flex-start - տարրերը հավասարեցված են ուղղահայաց առանցքի սկզբից. flex-end - տարրերը հավասարեցված են ուղղահայաց առանցքի վերջից. կենտրոն - տարրերը հավասարեցված են կենտրոնում; բազային - տարրերը դասավորված են բազային գծի երկայնքով. ձգում - տարրերը ձգվում են՝ զբաղեցնելով ամբողջ տարածությունը ուղղահայաց առանցքի երկայնքով (կանխադրված արժեք):

flex-start, flex-end

բազային, ձգվող

Հավասարեցնել ինքն իրեն

align-self-ը նույնպես պատասխանատու է ուղղահայաց հավասարեցման համար, բայց դրված է առանձին ճկուն տարրերի վրա:

Հնարավոր արժեքներ ինքնահաստատման համար.

auto-ը լռելյայն արժեքն է: Ցույց է տալիս, որ տարրն օգտագործում է մայր տարրի հավասարեցման տարրերը. flex-start - տարրը հավասարեցված է ուղղահայաց առանցքի սկզբից. flex-end - տարրը հավասարեցված է ուղղահայաց առանցքի ծայրից. կենտրոն - տարրը հավասարեցված է կենտրոնում; բազային - տարրը հավասարեցված է բազային գծի երկայնքով. ձգվել - տարրը ձգվում է՝ զբաղեցնելով ողջ բարձրության տարածությունը։

Հավասարեցնել-բովանդակությունը

Բազմագիծ ճկուն կոնտեյների ներսում հավասարեցումը վերահսկելու համար կա align-content հատկությունը:

Հնարավոր արժեքներ.

flex-start - տարրերը դասավորված են հիմնական առանցքի սկզբից. flex-end - տարրերը դասավորված են հիմնական առանցքի վերջից. կենտրոն - տարրերը հավասարեցված են հիմնական առանցքի կենտրոնին. տարածություն-միջև - տարրերը դասավորված են հիմնական առանցքի երկայնքով ՝ միմյանց միջև ազատ տարածություն բաշխելով. տարածություն շուրջը - տարրերը դասավորված են հիմնական առանցքի երկայնքով, նրանց շուրջ ազատ տարածություն բաշխելով. ձգում - տարրերը ձգվում են ամբողջ բարձրությունը լրացնելու համար (կանխադրված արժեքը):

flex-start, flex-end

կենտրոն, ձգվել

տարածություն-միջև, տարածություն շուրջը

Ps:Ես երբեք չեմ կարողացել տեսնել որոշ բաներ գործողության մեջ, օրինակ, ճկուն հոսքի գիծը. սյունակի փաթաթումը կամ նույն ճկուն ուղղության ամբողջական մուտքը. flex-wrap: փաթաթել; .

Տարրերը կանգնած են սյունակում, բայց չեն փոխանցվում.

wrap-ը չի աշխատում flex-direction-ով. սյունակ; , թեև սպեկտրում այն ​​հետևյալն է.

Կարծում եմ՝ ժամանակի ընթացքում կաշխատի։

UPD 06/21/2014-ից:ամեն ինչ աշխատում է, եթե դուք սահմանեք բլոկի բարձրությունը: Շնորհակալություն հուշման համար

CSS Flexbox-ի ամբողջական ուղեցույց: Այս ամբողջական ուղեցույցը բացատրում է ամեն ինչ flexbox-ի մասին՝ կենտրոնանալով մայր տարրի (flex բեռնարկղ) և երեխայի տարրերի (flex տարրերի) բոլոր հնարավոր հատկությունների վրա: Այն նաև ներառում է պատմություն, ցուցադրություններ, ձևանմուշներ և դիտարկիչի աջակցման աղյուսակ:

Նախապատմություն

flex-flow (Կիրառվում է. Flex կոնտեյների մայր տարրին)

Սա հապավում է ճկուն ուղղությունԵվ flex-փաթաթելհատկություններ, որոնք միասին սահմանում են ճկուն կոնտեյների հիմնական և լայնակի առանցքները: Լռելյայն արժեքն է անընդմեջ.

Ճկուն հոսք.<‘flex-direction’> || <‘flex-wrap’>

հիմնավորել-բովանդակություն

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

Կոնտեյներ (հիմնավորել-բովանդակությունը. ճկուն սկիզբ | ճկուն վերջ | կենտրոն | տարածություն-միջև | տարածություն-շուրջ | տարածություն-հավասար | սկիզբ | վերջ | ձախ | աջ ... + անվտանգ | անապահով; )

• flex-start(կանխադրված). տարրերը տեղափոխվում են դեպի ճկուն ուղղության սկիզբ:
• flex-endՏարրերը տեղափոխվում են դեպի ճկման ուղղության վերջը:
• սկսելտարրերը տեղափոխվում են սկիզբ գրելու ռեժիմուղղությունները։
• վերջ: տարրերը տեղափոխվում են վերջում գրելու ռեժիմուղղությունները։
• ձախտարրերը տեղափոխվում են դեպի տարայի ձախ եզրը, եթե դա իմաստ չունի ճկուն ուղղություն, ապա նա իրեն այնպես է պահում սկսել.
• ճիշտտարրերը տեղափոխվում են դեպի տարայի աջ եզրը, եթե դա իմաստ չունի ճկուն ուղղություն, ապա նա իրեն այնպես է պահում սկսել.
• կենտրոնտարրերը կենտրոնացած են գծի երկայնքով
• տարածություն-միջևտարրերը հավասարաչափ բաշխված են գծի երկայնքով. առաջին տարրը տողի սկզբում է, վերջին տարրը՝ տողի վերջում
• տարածություն-շուրջՏարրերը հավասարաչափ բաժանված են գծի երկայնքով, որի շուրջը հավասար տարածություն է: Նկատի ունեցեք, որ տեսողականորեն տարածությունները հավասար չեն, քանի որ բոլոր տարրերն ունեն նույն տարածությունը երկու կողմերում: Առաջին տարրը կունենա մեկ միավոր տարածություն տարայի եզրին, բայց երկու միավոր տարածություն հաջորդ տարրի միջև, քանի որ հաջորդ տարրն ունի իր սեփական տարածությունը, որը կիրառվում է:
• տարածություն-հավասարաչափՏարրերը բաշխված են այնպես, որ ցանկացած երկու տարրերի միջև հեռավորությունը (և հեռավորությունը դեպի ծայրերը) նույնն է:

Խնդրում ենք նկատի ունենալ, որ այս արժեքների համար բրաուզերի աջակցությունն ունի իր նրբությունները: Օրինակ, տարածություն-միջևերբեք Edge-ի աջակցություն չի ստացել, և սկիզբ/վերջ/ձախ/աջ դեռ Chrome-ում չէ: MDN-ի վրա: Ամենաանվտանգ արժեքներն են flex-start, flex-endԵվ կենտրոն.

Կան նաև երկու լրացուցիչ հիմնաբառեր, որոնք կարող եք կապել այս արժեքների հետ. ապահովԵվ անապահով. Օգտագործումը ապահովապահովում է, որ անկախ նրանից, թե որքան էլ անեք այս տեսակի դիրքավորումը, դուք չեք կարողանա տարրը տեղադրել այնպես, որ այն երևա էկրանից դուրս (ինչպես վերևում), այնպես որ բովանդակությունը նույնպես հնարավոր չէ պտտել (սա կոչվում է « տվյալների կորուստ»):

հավասարեցնել-իրերը

Այս հատկությունը սահմանում է լռելյայն վարքագիծը, թե ինչպես են ճկուն տարրերը դրված ընթացիկ գծի խաչաձև առանցքի երկայնքով: Մտածեք դրա մասին որպես խաչաձև առանցքի (հիմնական առանցքին ուղղահայաց) արդարացման բովանդակության տարբերակ:

Կոնտեյներ (հավասարեցրեք տարրերը՝ ձգվող | ճկուն մեկնարկ | ճկուն ավարտ | կենտրոն | ելակետ | առաջին ելակետ | վերջին ելակետ | սկիզբ | ավարտ | ինքնագործարկ | ինքնավարտ + ... անվտանգ | անապահով; )

• ձգվել(կանխադրված). ձգվել՝ տարան լցնելու համար (նվազագույն լայնությունը/առավելագույնը դեռ պահպանվում է)
• flex-start / սկսել / ինքնուրույն մեկնարկտարրերը տեղադրված են լայնակի առանցքի սկզբում: Նրանց միջև տարբերությունը փոքր է և կայանում է համապատասխանության մեջ ճկուն ուղղությունկանոնները կամ գրելու ռեժիմկանոնները
• flex-end / վերջ / ինքնավարությունՏարրերը գտնվում են լայնակի առանցքի վերջում: Տարբերությունը կրկին նուրբ է և կայանում է համապատասխանության մեջ ճկուն ուղղությունկամ գրելու ռեժիմկանոնները
• կենտրոնտարրերը կենտրոնացած են լայնակի առանցքի վրա
• բազային: տարրերը հավասարեցված են իրենց բազայինին

ապահովԵվ անապահովՓոփոխիչ հիմնաբառերը կարող են օգտագործվել այս բոլոր հիմնաբառերի հետ համակցված (թեև սա չի աջակցվում բոլոր բրաուզերների կողմից), դա օգնում է կանխել տարրերի հավասարեցումը այնպես, որ բովանդակությունը անհասանելի լինի:

align-content

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

ՆշումԱյս հատկությունը ազդեցություն չունի, երբ կա միայն մեկ տող ճկուն տարրեր:

Բեռնարկղ (հավասարեցրեք բովանդակությունը. ճկուն սկիզբ | ճկուն վերջ | կենտրոն | տարածություն-միջև | տարածություն-շուրջ | տարածություն-հավասար | ձգում | սկիզբ | ավարտ | բազային | առաջին բազային | վերջին բազային + ... անվտանգ | անապահով; )

• flex-start / սկսելտարրերը տեղափոխվել են տարայի սկիզբ: Ավելի շատ աջակցություն flex-startօգտագործում, ճկուն ուղղությունմինչդեռ սկսելօգտագործում է գրելու ռեժիմուղղությունը։
• flex-end / վերջ: տարրերը տեղափոխվել են տարայի վերջ: Ավելի շատ աջակցություն flex-endօգտագործում է ճկուն ուղղությունմինչդեռ վերջօգտագործում է գրելու ռեժիմուղղությունը։
• կենտրոնՏարրերը կենտրոնացած են տարայի մեջ
• տարածություն-միջևտարրերը հավասարաչափ բաշխված են. առաջին տողը տարայի սկզբում է, իսկ վերջին տողը վերջում
• տարածություն-շուրջՏարրերը հավասարաչափ տարածված են յուրաքանչյուր տողի շուրջը հավասար տարածությամբ
• տարածություն-հավասարաչափտարրերը բաշխված են հավասարաչափ՝ դրանց շուրջը հավասար տարածությամբ
• ձգվել(կանխադրված). գծերը ձգվում են՝ մնացած տարածքը լրացնելու համար

ապահովԵվ անապահովՓոփոխիչ հիմնաբառերը կարող են օգտագործվել այս բոլոր հիմնաբառերի հետ համակցված (թեև սա չի աջակցվում բոլոր բրաուզերների կողմից), դա օգնում է կանխել տարրերի հավասարեցումը այնպես, որ բովանդակությունը անհասանելի լինի:

Առաջին երեխայի տարրերի հատկությունները (ճկուն տարրեր)

պատվեր

Լռելյայնորեն, ճկուն տարրերը դասավորված են իրենց սկզբնական հերթականությամբ: Այնուամենայնիվ, գույքը պատվերվերահսկում է այն հերթականությունը, որով դրանք հայտնվում են ճկուն կոնտեյներով:

Նյութ (պատվեր. ; /* լռելյայն 0 */)

flex-grow

Այս հատկությունը որոշում է ճկուն տարրի կարողությունը ձգվելու անհրաժեշտության դեպքում: Այն վերցնում է արժեք զրոյից, որը ծառայում է որպես համամասնություն: Սա այն հատկությունն է, թե որքան հասանելի տարածք պետք է զբաղեցնի տարրը ճկուն կոնտեյներով:

Եթե ​​բոլոր տարրերի համար flex-growդրված է 1-ի վրա, տարայի մեջ մնացած տարածքը հավասարապես կբաշխվի բոլոր մանկական տարրերի միջև: Եթե ​​երեխա տարրերից մեկն ունի 2 արժեք, այդ տարրը երկու անգամ ավելի շատ տեղ կզբաղեցնի, քան մյուսները (կամ կփորձեն գոնե):

Նյութ (flex-grow: ; /* լռելյայն 0 */)

ճկուն-կծկվել

Այս հատկությունը որոշում է ճկուն տարրի կարողությունը սեղմվելու անհրաժեշտության դեպքում:

Տարր (ճկուն-կծկվել. ; /* լռելյայն 1 */)
Բացասական թվերը չեն աջակցվում:

ճկուն հիմքով

Այս հատկությունը սահմանում է տարրի լռելյայն չափը, նախքան մնացած տարածքը հատկացնելը: Սա կարող է լինել երկարություն (օրինակ՝ 20%, 5ռեմ և այլն) կամ հիմնաբառ: Հիմնաբառ ավտոնշանակում է «նայիր իմ լայնության կամ բարձրության սեփականությանը»: Հիմնաբառ բովանդակությունընշանակում է «չափը հիմնված տարրի բովանդակության վրա». այս հիմնաբառը դեռ այնքան էլ լավ չի աջակցվում, ուստի դժվար է ստուգել, ​​թե ինչ է օգտագործվում դրա համար: առավելագույն բովանդակություն, min-բովանդակությունկամ համապատասխան բովանդակություն.

Նյութ ( flex-basic: | ավտո; /* լռելյայն ավտոմատ */)
Եթե ​​սահմանված է 0 , բովանդակության շուրջ լրացուցիչ տարածությունը հաշվի չի առնվում։ Եթե ​​սահմանված է ավտո, հավելյալ տարածքը բաշխվում է կախված դրա flex-growիմաստներ.

Տես այս գծանկարը.

ճկել

Սա օգտագործման սղագրությունն է flex-grow, ճկուն-կծկվելԵվ ճկուն հիմքովմիասին. Երկրորդ և երրորդ պարամետրերը ( ճկուն-կծկվելԵվ ճկուն հիմքով) ընտրովի են: Լռելյայն է 0 1 ավտո.

Տարր ( flex: none | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
Խորհուրդ է տրվում օգտագործել այս սղագրության հատկությունըայլ ոչ թե անհատական ​​հատկություններ սահմանելը: Այս կրճատումը խելամտորեն սահմանում է այլ արժեքներ:

հարթեցնել ինքն իրեն

Այս հատկությունը թույլ է տալիս վերացնել լռելյայն հավասարեցումը (կամ նշված՝ օգտագործելով հավասարեցնել-իրերը) առանձին ֆլեքս իրերի համար։
Խնդրում եմ նայեք հավասարեցնել-իրերըսեփականություն՝ հասանելի արժեքները հասկանալու համար:

Տարր (հավասարեցնել ինքն իրեն. ավտոմատ | ճկուն սկիզբ | ճկուն ավարտ | կենտրոն | բազային | ձգում; )
Խնդրում ենք նկատի ունենալ, որ հատկությունները լողալ, պարզԵվ ուղղահայաց-հավասարեցնելչեն ազդում ճկուն տարրերի վրա:

Օրինակներ

Սկսենք շատ պարզ օրինակից, որը լուծում է գրեթե ամենօրյա խնդիր՝ կատարյալ հավասարեցում: Այս առաջադրանքի ամենապարզ լուծումը flexbox-ի օգտագործումն է:

Ծնող (էկրան՝ ճկուն; բարձրություն՝ 300px; /* Կամ ինչ էլ որ լինի */) )
Դա տեղի է ունենում այն ​​պատճառով, որ ուղղահայաց հավասարեցման հատկության լուսանցքը սահմանված է ավտոճկուն կոնտեյներով, կլանում է լրացուցիչ տարածք: Այսպիսով, սահմանելով մարժան ավտոկդարձնի օբյեկտը կատարելապես կենտրոնացած երկու առանցքների վրա:

Այժմ եկեք օգտագործենք ևս մի քանի հատկություններ: Մտածեք 6 տարրերից բաղկացած ցանկը, բոլորը ֆիքսված չափերով, բայց կարող են լինել նաև ավտոմատ չափեր: Մենք ցանկանում ենք, որ դրանք հավասարաչափ բաշխվեն հորիզոնական առանցքի երկայնքով, որպեսզի երբ բրաուզերի չափը փոխվի, ամեն ինչ լավ մասշտաբի և առանց մեդիա հարցումների:

Flex-container ( /* Սկզբում մենք ստեղծում ենք ճկուն համատեքստ */ ցուցադրում: flex; /* Այնուհետև մենք սահմանում ենք ճկուն ուղղություն և թույլ ենք տալիս տարրերին փաթաթվել նոր տողերի վրա * Հիշեք, որ սա նույնն է, ինչ. * flex-direction: row * Flex-wrap՝ wrap */ flex-flow:
Պատրաստ. Մնացած ամեն ինչ պարզապես ոճավորում է:

Եթե ​​փոխեք էկրանի լուծաչափը կամ մասշտաբը, այն կունենա հետևյալ տեսքը.

Եկեք մի ուրիշ բան փորձենք։ Պատկերացրեք, որ մենք ունենք աջ դասավորված նավիգացիոն տարրեր մեր կայքի վերևում, բայց մենք ցանկանում ենք, որ դրանք արդարացվեն միջին չափի էկրանների վրա և մեկ սյունակում փոքր սարքերում: Դա բավականին պարզ է.

/* Մեծ էկրաններ */ .նավիգացիա ( ցուցադրում՝ flex; flex-flow: row wrap; /* Սա կհավասարեցնի տարրերը հիմնական առանցքի տողի վերջում */ justify-content: flex-end; ) /* Միջին էկրաններ */ @ media all and (առավելագույն լայնությունը՝ 800px) ( .navigation ( /* Միջին չափսի էկրանների վրա մենք կենտրոնացնում ենք տարրերը՝ հավասարաչափ բաշխելով սպիտակ տարածությունը տարրերի շուրջ */ justify-content: space-around; ) ) /* Փոքր էկրաններ */ @media all and (max-width՝ 500px) ( .navigation ( /* Փոքր էկրաններում մենք այլևս չենք օգտագործում տողի ուղղությունը, այլ սյունակ */ flex-direction՝ սյունակ; ) )

Մեծ էկրաններ

Միջին էկրաններ

Փոքր էկրաններ

Եկեք փորձենք ավելի լավ բան՝ խաղալով ճկուն տարրերի հետ: Ինչ կասեք 3 սյունակով, ամբողջ բարձրությամբ էջի դասավորության մասին՝ վերնագիր և ստորագիր: Եվ կախված չէ տարրերի սկզբնական կարգից:

Wrapper ( ցուցադրում. flex; flex-flow: row wrap; ) /* Մենք ասում ենք, որ բոլոր տարրերն ունեն 100% լայնություն, Flex-base */ .wrapper > * ( flex: 1 100%; ) /* Մենք օգտագործում ենք առաջին բջջային տարբերակի սկզբնական պատվերը * 1. վերնագիր * 2. հոդված * 3. մի կողմ 1 * 4. մի կողմ 2 * 5. ստորագիր */ /* Միջին էկրաններ */ @media բոլորը և (min-լայնությունը՝ 600px) ( /* Մենք երկու կողագոտին ասում ենք, որ լինեն նույն տողում */ .aside ( flex: 1 auto; ) ) /* Մեծ էկրաններ */ @media all and (min-width: 800px) ( /* Մենք հակադարձում ենք կարգը առաջին կողագոտին և հիմնականը և ասեք հիմնական տարրին այնպես, որ այն զբաղեցնի մյուս երկու կողագոտերի լայնությունը երկու անգամ */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order : 2;

@mixin flexbox() ( ցուցադրում՝ -webkit-box; ցուցադրում՝ -moz-box; ցուցադրում՝ -ms-flexbox; ցուցադրում՝ -webkit-flex; ցուցադրում՝ flex; ) @mixin flex ($values) ( -webkit- box-flex՝ $values ​​-moz-box-flex: $values ​​-webkit-flex: -ordinal-group: $val -ms-flex-order: $val -webkit-order:

Սխալներ

Flexbox-ը, իհարկե, առանց իր սխալների չէ: Դրանցից լավագույն հավաքածուն, որը ես տեսել եմ, Flexbugs-ն է Ֆիլիպ Ուոլթոնի և Գրեգ Ուիթվորթի կողմից: Սա բաց կոդով պահոց է՝ բոլորին հետևելու համար, այնպես որ, կարծում եմ, ավելի լավ է պարզապես կապել դրան:

Բրաուզերի աջակցություն

Բաշխված է ըստ flexbox «տարբերակի».

• (նոր) նշանակում է ճշգրտման վերջին շարահյուսություն (օրինակ ցուցադրում: flex;)
• (tweener) նշանակում է տարօրինակ ոչ պաշտոնական շարահյուսություն 2011 թվականից սկսած (օրինակ էկրան՝ flexbox;)
• (հին) նշանակում է հին շարահյուսություն 2009 թվականից սկսած (օրինակ ցուցադրում՝ տուփ;)

Blackberry Browser 10+-ն աջակցում է նոր շարահյուսությանը:

Լրացուցիչ տեղեկությունների համար, թե ինչպես խառնել շարահյուսությունները՝ զննարկիչի ավելի լավ աջակցություն ստանալու համար, խնդրում ենք դիմել

align-content հատկությունը սահմանում է ճկուն կոնտեյների ներսում գծերի հավասարեցման տեսակը լայնակի առանցքի երկայնքով, եթե կա ազատ տարածություն:

Դա վերաբերում է: ճկուն կոնտեյներ:

Կանխադրված արժեք՝ ձգվել.

Flex-start Գծերը գտնվում են լայնակի առանցքի սկզբում: Յուրաքանչյուր հաջորդ տող համահունչ է նախորդի հետ: flex-end շարքերը տեղադրվում են՝ սկսած խաչաձև առանցքի վերջից: Յուրաքանչյուր նախորդ տող համահունչ է հաջորդին: կենտրոն Գծերը տեղադրված են տարայի կենտրոնում։ space-between Գծերը հավասարաչափ բաշխված են տարայի մեջ և նրանց միջև հեռավորությունը նույնն է: Տարածություն-շուրջ Գծերը հավասարապես բաժանված են այնպես, որ երկու հարակից գծերի միջև տարածությունը նույնն է: Առաջին տողից առաջ և վերջին տողից հետո դատարկ տարածությունը հավասար է երկու հարակից տողերի միջև եղած տարածության կեսին: space- evenly Տողերը բաշխվում են հավասարաչափ: Առաջին տողից առաջ և վերջին տողից հետո սպիտակ տարածությունը նույն լայնությունն է, ինչ մյուս տողերը: ձգում Գծերը հավասարաչափ ձգվում են՝ հասանելի տարածքը լրացնելու համար:

align-content հատկությունը հավասարեցնում է ճկուն կոնտեյների գծերը ճկուն կոնտեյների ներսում, երբ խաչաձև առանցքում լրացուցիչ տարածություն կա, ինչպես justify-content-ը հավասարեցնում առանձին տարրերը հիմնական առանցքի ներսում: Նկատի ունեցեք, որ այս հատկությունը չի ազդում մեկ տողով ճկուն կոնտեյների վրա: Արժեքներն ունեն հետևյալ իմաստները.

Ծանոթագրություն. Միայն բազմաշերտ ճկուն կոնտեյներները երբևէ ունեն ազատ տարածություն խաչաձև առանցքում գծերի հավասարեցման համար, քանի որ մեկ տողանի ճկուն կոնտեյների մեջ միակ գիծը ավտոմատ կերպով ձգվում է՝ լրացնելու տարածքը:

Վերաբերում է:flex տարաներ.

Նախնական՝ ձգվել.

Flex-start գծերը փաթեթավորված են դեպի ֆլեքս կոնտեյների սկիզբը: Ճկուն կոնտեյների առաջին տողի խաչաձև եզրը տեղադրվում է ճկուն տարայի խաչաձև մեկնարկային եզրին, և յուրաքանչյուր հաջորդ տող տեղադրվում է նախորդ գծի հետ: Flex-end գծերը փաթեթավորվում են դեպի ֆլեքս կոնտեյների վերջը: Վերջին տողի խաչաձև եզրը տեղադրվում է ճկուն կոնտեյների խաչաձև եզրին, և յուրաքանչյուր նախորդ տող տեղադրվում է հաջորդ գծի հետ: կենտրոն Գծերը փաթեթավորված են դեպի ճկուն կոնտեյների կենտրոնը: Flex կոնտեյների գծերը տեղադրվում են միմյանց հետ և հավասարեցվում են ֆլեքս կոնտեյների կենտրոնում՝ հավասար քանակությամբ տարածություն ունենալով ճկուն կոնտեյների խաչաձև մեկնարկային եզրերի և ճկուն կոնտեյների առաջին տողի միջև, և ճկուն կոնտեյների խաչաձև բովանդակության եզրը և ճկուն կոնտեյների վերջին տողը: (Եթե ազատ տարածության մնացորդը բացասական է, գծերը հավասարապես կհեղեղեն երկու ուղղություններով): Եթե ​​ազատ տարածության մնացորդը բացասական է, այս արժեքը նույնական է flex-start-ին: Հակառակ դեպքում, ճկուն կոնտեյների մեջ առաջին գծի խաչաձև եզրը տեղադրվում է ֆլեքս տարայի խաչաձև մեկնարկային պարունակության եզրին, իսկ ճկուն տարայի վերջին գծի խաչաձև եզրը տեղադրվում է խաչաձև կոնտեյների հետ: Flex կոնտեյների վերջի պարունակության եզրը, իսկ ճկուն կոնտեյների մնացած գծերը բաշխված են այնպես, որ ցանկացած երկու հարակից գծերի միջև հեռավորությունը նույնն է: տարածության շուրջ Գծերը հավասարաչափ բաշխված են ճկուն կոնտեյներով՝ երկու ծայրերում կիսով չափ բացատներով: Եթե ​​ազատ տարածության մնացորդը բացասական է, այս արժեքը նույնական է կենտրոնին: Հակառակ դեպքում, ճկուն կոնտեյների գծերը բաշխված են այնպես, որ ցանկացած երկու հարակից գծերի միջև հեռավորությունը նույնն է, իսկ առաջին/վերջին տողերի և ճկուն կոնտեյների եզրերի միջև եղած տարածությունը կիսով չափ լինի ճկուն գծերի միջև եղած տարածության չափով: տարածության հավասարաչափ Գծերը հավասարաչափ բաշխված են ճկուն կոնտեյներով: Եթե ​​ազատ տարածության մնացորդը բացասական է, այս արժեքը նույնական է կենտրոնին: Հակառակ դեպքում, ճկուն կոնտեյների գծերը բաշխված են այնպես, որ յուրաքանչյուր ճկուն գծի միջև հեռավորությունը նույնն է: ձգվող Գծերը ձգվում են մնացած տարածքը գրավելու համար: Եթե ​​ազատ տարածության մնացորդը բացասական է, ապա այս արժեքը նույնական է flex-start-ին: Հակառակ դեպքում, ազատ տարածությունը հավասարապես բաժանվում է բոլոր տողերի միջև՝ մեծացնելով դրանց խաչի չափը:

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

Մեր տուփը կենտրոնացնելու համար մենք օգտագործում ենք align-item հատկությունը՝ մեր նյութը խաչաձև առանցքի վրա հավասարեցնելու համար, որն այս դեպքում ուղղահայաց ընթացող բլոկի առանցքն է: Մենք օգտագործում ենք justify-content նյութը հիմնական առանցքի վրա հավասարեցնելու համար, որն այս դեպքում հորիզոնական առանցքն է անցնում:

Ստորև կարող եք դիտել այս օրինակի կոդը: Փոխեք կոնտեյների կամ ներդիր տարրի չափը, և տեղադրված տարրը միշտ մնում է կենտրոնում:

Հատկություններ, որոնք վերահսկում են հավասարեցումը

Հատկությունները, որոնք մենք կդիտարկենք այս ուղեցույցում, հետևյալն են.

• justify-content - վերահսկում է բոլոր տարրերի հավասարեցումը հիմնական առանցքի վրա:
• align-iters - վերահսկում է բոլոր տարրերի հավասարեցումը խաչաձև առանցքի վրա:
• align-self - վերահսկում է առանձին ճկուն տարրի հավասարեցումը խաչաձև առանցքի վրա:
• align-content - նկարագրված է բնութագրում որպես «փաթեթավորման ճկուն գծեր»; վերահսկում է ճկուն գծերի միջև տարածությունը խաչաձև առանցքի վրա:

Մենք նաև կբացահայտենք, թե ինչպես կարող են ավտոմատ լուսանցքները օգտագործվել flexbox-ում հավասարեցման համար:

Նշում Flexbox-ի հավասարեցման հատկությունները տեղադրվել են իրենց սեփական ճշգրտման մեջ՝ CSS Box Alignment Level 3: Ակնկալվում է, որ այս հատկանիշը, ի վերջո, կփոխարինի Flexbox Level One-ում սահմանված հատկություններին:

Խաչի առանցքը

Հավասարեցնել տարրերը և align-self-ի հատկությունները վերահսկում են մեր ճկուն տարրերի հավասարեցումը խաչաձև առանցքի վրա, սյունակներով ներքև, եթե ճկուն ուղղությունը տող է, և տողի երկայնքով, եթե ճկուն ուղղությունը սյունակ է:

Մենք օգտագործում ենք խաչաձև առանցքների հավասարեցում ամենապարզ ճկուն օրինակում: Եթե ​​կոնտեյների մեջ ավելացնենք ցուցադրում՝ flex, ապա մանկական տարրերը բոլորը դառնում են անընդմեջ դասավորված ճկուն տարրեր: Նրանք բոլորը կձգվեն այնքան բարձր, որքան ամենաբարձր իրը, քանի որ այդ տարրը սահմանում է իրերի բարձրությունը խաչի առանցքի վրա: Եթե ​​ձեր ճկուն կոնտեյները ունի բարձրություն, ապա տարրերը կձգվեն մինչև այդ բարձրությունը՝ անկախ այն բանից, թե որքան պարունակություն կա ապրանքի մեջ:

Պատճառը, որ տարրերը դառնում են նույն բարձրությունը, այն է, որ align-iters-ի սկզբնական արժեքը, հատկությունը, որը վերահսկում է հավասարեցումը խաչաձև առանցքի վրա, սահմանվել է ձգվելու:

Մենք կարող ենք օգտագործել այլ արժեքներ՝ վերահսկելու համար, թե ինչպես են տարրերը համընկնում.

• align- items: flex-start
• align- items: flex-end
• հավասարեցնել-իրեր՝ կենտրոն
• հավասարեցնել-իրեր՝ ձգվել
• align- items: բազային

Ստորև բերված կենդանի օրինակում align-iters-ի արժեքը ձգվում է: Փորձեք մյուս արժեքները և տեսեք, թե ինչպես են բոլոր տարրերը հարթվում միմյանց դեմ ճկուն կոնտեյներով:

Մեկ տարրի հավասարեցում align-self-ի հետ

align-item հատկությունը սահմանում է align-self հատկությունը բոլոր flex տարրերի վրա որպես խումբ: Սա նշանակում է, որ դուք կարող եք բացահայտորեն հայտարարել align-self հատկությունը՝ թիրախավորելու մեկ տարր: align-self հատկությունը ընդունում է բոլոր նույն արժեքները, ինչ align-iters գումարած auto-ի արժեքը, որը կվերադարձնի արժեքը այն արժեքին, որը սահմանված է ճկուն կոնտեյների վրա:

Այս հաջորդ կենդանի օրինակում ճկուն կոնտեյները ունի align- տարրեր՝ flex-start , ինչը նշանակում է, որ տարրերը բոլորը հավասարեցված են խաչաձև առանցքի սկզբին: Ես թիրախավորել եմ առաջին տարրը, օգտագործելով առաջին երեխայի ընտրիչը և սահմանել եմ այդ տարրը, որպեսզի ինքնահաստատվի. ձգվել ; մեկ այլ տարր ընտրվել է՝ օգտագործելով ընտրվածի իր դասը և տրված է align-self: center : Դուք կարող եք փոխել align-iters-ի արժեքը կամ փոխել align-self-ի արժեքները առանձին տարրերի վրա՝ տեսնելու, թե ինչպես է դա աշխատում:

Հիմնական առանցքի փոփոխություն

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

Եթե ​​մենք փոխենք մեր ճկուն ուղղությունը սյունակի, ապա align-iters և align-self-ը կհավասարեցնեն տարրերը ձախ և աջ:

Դուք կարող եք դա փորձել ստորև բերված օրինակում, որն ունի ճկուն ուղղություն ունեցող ճկուն կոնտեյներ. սյունակը, հակառակ դեպքում, նույնն է, ինչ նախորդ օրինակը:

Բովանդակության հավասարեցում խաչաձև առանցքի վրա՝ align-content հատկությունը

Առայժմ մենք դասավորել ենք իրերը կամ առանձին առարկաներ ֆլեքս-կոնտեյների կողմից սահմանված տարածքի ներսում: Եթե ​​դուք ունեք մի քանի տողով փաթաթված ճկուն կոնտեյներ, ապա կարող եք նաև օգտագործել align-content հատկությունը՝ տողերի միջև տարածության բաշխումը վերահսկելու համար: Հստակեցման մեջ սա նկարագրված է որպես ճկուն գծերի փաթեթավորում:

Որպեսզի բովանդակությունը հավասարեցվի, ձեզ անհրաժեշտ է ավելի շատ բարձրություն ձեր ճկուն կոնտեյներով, քան պահանջվում է տարրերը ցուցադրելու համար: Այնուհետև այն աշխատում է բոլոր տարրերի վրա որպես հավաքածու և թելադրում է, թե ինչ է տեղի ունենում այդ ազատ տարածության հետ, և դրա ներսում գտնվող իրերի ամբողջ հավաքածուի հավասարեցումը:

align-content հատկությունը ընդունում է հետևյալ արժեքները.

• align-content: flex-start
• align-content՝ flex-end
• align-content՝ կենտրոն
• align-content. space-միջեւ
• align-content՝ տարածություն շուրջը
• align-content՝ ձգվել
• align-content. տարածությունը հավասարաչափ (սահմանված չէ Flexbox-ի բնութագրում)

Ստորև բերված կենդանի օրինակում ճկուն կոնտեյները ունի 400 պիքսել բարձրություն, որն ավելին է, քան անհրաժեշտ է մեր իրերը ցուցադրելու համար: align-content-ի արժեքը space-between է, ինչը նշանակում է, որ հասանելի տարածքը բաժանված է միջեւճկուն գծերը, որոնք տեղադրվում են տարայի սկզբի և վերջի հետ խաչաձև առանցքի վրա:

Փորձեք մյուս արժեքները՝ տեսնելու, թե ինչպես է աշխատում align-content հատկությունը:

Կրկին մենք կարող ենք փոխել մեր ճկուն ուղղությունը սյունակի, որպեսզի տեսնենք, թե ինչպես է այս հատկությունը վարվում, երբ մենք աշխատում ենք ըստ սյունակի: Ինչպես նախկինում, մեզ անհրաժեշտ է բավականաչափ տարածություն խաչաձև առանցքում՝ բոլոր տարրերը ցուցադրելուց հետո որոշ ազատ տարածություն ունենալու համար:

Նշում. արժեքը հավասարաչափ տարածություն սահմանված չէ flexbox-ի բնութագրում և ավելի ուշ լրացում է Box Alignment ճշգրտմանը: Այս արժեքի զննարկիչի աջակցությունը այնքան էլ լավ չէ, որքան flexbox սպեկտրի մեջ սահմանված արժեքները: