Լռելյայն արժեք: 0 1 ավտոմատ:

W3C- ն խորհուրդ է տալիս օգտագործել կրճատվող Flex- ի գույքը, անհատական \u200b\u200bհատկությունների փոխարեն, քանի որ Flex- ը ճիշտ է վերականգնում ցանկացած չճշտված բաղադրիչների բնորոշ օգտագործման համար:

align-self

Align- ի սեփականությունը թույլ է տալիս գերակշռել լռելյայն հավասարեցումը (կամ հավասարեցման կետերի միջոցով նշված արժեքը) անհատական \u200b\u200bFlex տարրերի համար: Առկա արժեքները հասկանալու համար դիմեք Flex բեռնարկղի հավասարեցման կետերի նկարագրությանը:

Արժեքներ

Երրորդ եւ չորրորդ Flex տարրերի համար հավասարեցումը շրջանցվում է հավասարեցված ինքնաբերության միջոցով:

Մոդալ FlexBox-Leuauta (Flexible կուն տուփ - «Flexible կուն բլոկ», որի վրա այս պահին W3C թեկնածուի առաջարկությունը) խնդիր է դնում առաջարկել բեռնարկղում տարրերի միջեւ անվճար տարածություն տեղադրելու, հավասարեցման եւ բաշխելու ավելի արդյունավետ միջոց, նույնիսկ այն դեպքում, երբ դրանց չափը անհայտ է եւ (կամ կամ դինամիկ):

Տեխնիկայի Flex-Guard- ի հիմնական գաղափարը օժտված է տարածության լավագույն լրացման համար իր տարրերի լայնությունը / բարձրությունը (եւ կարգը) կարողությամբ (շատ դեպքերում) ): Flex բեռնարկղը երկարացնում է տարրերը `ազատ տարածությունը լրացնելու կամ դրանք սեղմելու համար, կանխելու սահմանը:

Ամենակարեւորը, Flexbox-Leiut- ը կախված չէ այն ուղղությունից, ի տարբերություն սովորական տեճի (բլոկների, ուղղահայաց, իսկ ներքնազգեստի տարրերը հորիզոնական են): Թեեւ սովորական Leiut- ը հիանալի է վեբ էջերի համար, այն չունի ճկունություն (ոչ մի բանկա) `մեծ կամ բարդ դիմումներին աջակցելու համար (հատկապես, երբ խոսքը վերաբերում է էկրանին կողմնորոշմանը, չափափոխում, ձգում, սեղմում եւ այլն):

ՄեկնաբանությունFlexBox-Leuaout- ը լավագույնս հարմար է դիմումի եւ փոքրածավալ գործողությունների կոմպոզիտային մասերի համար, մինչդեռ ցանցն ավելի շատ օգտագործվում է Լաացիների համար:

Հիմունքներ

Որովհետեւ FlexBox- ը մի ամբողջ մոդուլ է, եւ ոչ միայն մեկ գույք, այն համատեղում է բազմաթիվ հատկություններ: Դրանցից մի քանիսը պետք է կիրառվեն բեռնարկղի վրա (ծնողական տարր, այսպես կոչված flex բեռնարկղ), իսկ մյուս հատկությունները վերաբերում են երեխաների տարրերին, կամ flex տարրեր.

Եթե \u200b\u200bսովորական Leuaout- ը հիմնված է բլոկի եւ ներկառուցված տարրերի ուղղությունների վրա, Flex-Liaut- ը հիմնված է «Flex-Flex- ի ուղղությունների» վրա: Ստուգեք այս սխեման ճշգրտումից, բացատրելով Flex-Leuaitov- ի հիմնական գաղափարը:

Տարրերի մեծ մասը կբաշխվի կամ միասին Հիմնական առանցքը (ից Հիմնական մեկնարկը: նախքան Հիմնական-վերջ:) կամ երկայնքով Լայն ուղեկցող առանցք (ից Սկսել: նախքան Խաչմերուկ:).

• Հիմնական առանցք - Հիմնական առանցքը, որի կողքին գտնվում են Flex տարրերը: Նշում, դա պարտադիր չէ, որ հորիզոնական լինի, ամեն ինչ կախված է Flex-Direction- ի ունեցվածքից (տես ստորեւ):
• Հիմնական մեկնարկը: | Հիմնական-վերջ: - Flex տարրերը տեղադրվում են բեռնարկղում հիմնական մեկնարկային դիրքից մինչեւ հիմնական դիրքը:
• Հիմնական չափը: - Flex Damite- ի լայնությունը կամ բարձրությունը `կախված ընտրված հիմնական արժեքից: Հիմնական արժեքը կարող է լինել կամ լայնություն կամ տարրի բարձրություն:
• Խաչ առանցք: - լայնակի առանցքը ուղղահայաց է հիմնականին: Դրա ուղղությունը կախված է հիմնական առանցքի ուղղությունից:
• Սկսել: | Խաչմերուկ: - Flex տողերը լցված են տարրերով եւ տեղակայված են խաչմերուկի դիրքից մինչեւ խաչաձեւ դիրքի բեռնարկղում:
• Խաչի չափը - Flex տարրի լայնությունը կամ բարձրությունը, կախված չափի չափից, հավասար է այս մեծության: Այս գույքը համընկնում է կետի լայնության կամ բարձրության հետ `կախված հարթության չափից:

Հատկություններ

display ուցադրում. Flex | Inline-flex;

Այն վերաբերում է.

Որոշում է Flex բեռնարկղը (ներկառուցված կամ բլոկը, կախված ընտրված արժեքից), կապում է Flex- ի համատեքստը իր անմիջական սերունդների համար:

Մտապահեք:

• CSS սյուները չեն աշխատում Flex բեռնարկղով
• float, պարզ եւ ուղղահայաց-հավասարեցումը չեն աշխատում Flex տարրերի հետ

flex- ուղղում:

Այն վերաբերում է. Ծնողների տարրերի ֆլեքս-բեռնարկղ:

Սահմանում է հիմնական առանցքի հիմնական առանցքը, դրանով իսկ որոշելով բեռնարկղում տեղադրված Flex տարրերի ուղղությունը:

• row (լռելյայն). Ձախից աջ ԼՏՏ-ի համար աջ, RTL- ի համար ձախ;
• row-Reverse. Right ձախ, LTR- ի համար, ձախից աջ RTL;
• Սյունակ, տողի նման, վերեւից ներքեւ;
• Սյունակ-հակադարձ. Նման է տողի հակառակ, ներքեւի մասի:

Ֆլեքս փաթաթան

Այն վերաբերում է. Ծնողների տարրերի ֆլեքս-բեռնարկղ:

Որոշում է, թե արդյոք բեռնարկղը կլինի մեկ տող կամ բազմաֆունկցիոնալ, ինչպես նաեւ լայնակի առանցքի ուղղությունը, որը որոշելու է նոր տողերը:

• nowrap (լռելյայն). Միայնակ / ձախից աջ LTR- ի համար աջ, RTL- ի համար ձախ;
• Փաթեթավորեք. Բազմաֆունկցիոնալ / ձախից աջ ԼՏՏ-ի համար, RTL- ի ձախ կողմում.
• Փաթեթավորող. Բազմաֆունկցիոնալ / աջ մնացել է LTR- ի համար, ձախից աջ RTL:

flex-հոսք:

Այն վերաբերում է. Ծնողների տարրերի ֆլեքս-բեռնարկղ:

Սա Flex-Flex- ի եւ Flex-S փաթեթների հատկությունների կրճատում է, որոնք միասին սահմանում են հիմնական եւ լայնակի առանցքը: Լռելյայն վերցնում է Nowrap տողի արժեքը:

Այն վերաբերում է. Ծնողների տարրերի ֆլեքս-բեռնարկղ:

Որոշում է հավասարեցման հավասարեցումը հիմնական առանցքի հետ: Օգնում է տարածել մնացած ազատ տարածքը այն դեպքում, երբ գծի տարրերը «ձգվում են» կամ ձգվում են, բայց արդեն հասել են դրա առավելագույն չափի: Նաեւ թույլ է տալիս որոշակի ձեւով վերահսկել տարրերի հավասարեցումը, երբ լարը թողարկվի:

• flex-Start. Elements- ը տեղափոխվում է գծի սկզբում.
• flex-End. Elements- ը տեղափոխվում է տողի ավարտով.
• Կենտրոն. Տարրերը հավասարեցված են գծի կենտրոնում.
• Տիեզերք. Տարրերը հավասարաչափ բաշխվում են հավասարաչափ (գծի սկզբում առաջին տարրը, վերջինը `վերջում);
• Տիեզերք. Տարրերը հավասարաչափ բաշխվում են հավասար հեռավորության վրա իրենց եւ տողի սահմանների միջեւ:

Այն վերաբերում է. Ծնողների տարրերի ֆլեքս-բեռնարկղ:

Սահմանում է Flex տարրերի համար լռելյայն պահվածքը `կապված ընթացիկ գծի լայնակի առանցքի հետ: Հաշվի առեք արդարացված բովանդակության այս տարբերակը լայնակի առանցքի համար (հիմնական ուղղահայաց):

• flex-Start. Նյութերի խաչմերուկի սահմանը գտնվում է խաչմերուկի դիրքում.
• flex-End. Նյութերի համար խաչաձեւ սահմանը գտնվում է խաչաձեւ դիրքի վրա.
• Կենտրոն. Տարրերը հավասարեցված են լայնակի առանցքի կենտրոնում.
• Ելակետ. Տարրերը հավասարեցված են իրենց ելակետին.
• Ձգում (լռելյայն). Տարրերը ձգվում են, լցնում բեռնարկղը (հաշվի առնելով նվազագույն / առավելագույն լայնությունը):

Այն վերաբերում է. Ծնողների տարրերի ֆլեքս-բեռնարկղ:

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

Մեկնաբանություն: Այս գույքը չի գործում մեկ տող ֆլեքսիով:

• flex-Start. Գծերը հավասարեցված են կոնտեյների մեկնարկի համեմատ;
• flex-End. Գիծները հավասարեցված են կոնտեյների ավարտի համեմատ;
• Կենտրոն. Տողերը համահունչ են բեռնարկղի կենտրոնում.
• Տիեզերք. Գիծները հավասարաչափ բաշխվում են (գծի սկզբում առաջին տողը, վերջինս վերջում է);
• space-Round: Գիծները հավասարաչափ բաշխվում են հավասար հեռավորության վրա.
• Ձգում (լռելյայն). Թողերը ձգվում են, լրացնելով ազատ տարածքը:

պատվեր

Այն վերաբերում է.

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

Պատվեր:<Թանձր

flex-Grow.

Այն վերաբերում է. Դուստրերի տարր / Flex տարր:

Flex- ի տարրը որոշում է անհրաժեշտության դեպքում «աճելու» ունակությունը: Վերցնում է ինդեքսավորված արժեք, որը ծառայում է որպես համամասն: Դա որոշում է բեռնարկղի ներսում ազատ տարածքի մի մասը կարող է զբաղեցնել տարրը:

Եթե \u200b\u200bբոլոր իրերը ունեն Flex- աճող գույք, որպես 1, ապա յուրաքանչյուր սերունդ կստանա նույն չափը բեռնարկղի ներսում: Եթե \u200b\u200bդուք դրեք սերունդներից 2-ը, ապա դա կտեւի երկու անգամ ավելի շատ տեղ, քան մյուսները:

Flex-Grow:<Թիվ\u003e (Լռելյայն 0)

flex-Shrink.

Այն վերաբերում է. Դուստրերի տարր / Flex տարր:

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

Flex-Shrink: (Լռելյայն 1)

Բացասական թվերը չեն ընդունվում:

flex- հիմք:

Այն վերաբերում է. Դուստրերի տարր / Flex տարր:

Որոշում է տարրի համար լռելյայն չափը նախքան բեռնարկղում տարածքի բաշխումը:

Flex- հիմք.<Երկարություն\u003e | Auto (Default Auto)

Ճամփորդել

Այն վերաբերում է. Դուստրերի տարր / Flex տարր:

Սա Flex-Grow- ի, Flex-Shrink- ի եւ Flex- ի կրճատումն է: Երկրորդ եւ երրորդ պարամետրերը (Flex-Shrink- ը, Flex-Habin- ը) ընտրովի են: Լռելյայն արժեքը 0 1 ավտոմեքենա է:

align-self

Այն վերաբերում է. Դուստրերի տարր / Flex տարր:

Թույլ է տալիս շրջանցել լռելյայն հավասարեցումը կամ հավասարեցված իրերը, անհատական \u200b\u200bFlex տարրերի համար:

Տես ALIGN- ի գույքի նկարագրությանը `առկա արժեքների ավելի լավ պատկերացումների համար:

Օրինակներ

Սկսենք շատ, շատ պարզ օրինակից, տեղի ունեցած գրեթե ամեն օր. Հավասարաչափ հենց կենտրոնում: Flexbox- ի օգտագործմամբ ավելի հեշտ բան չկա:

Այս օրինակը հիմնված է այն փաստի վրա, որ Flex բեռնարկղում գտնվող լուսանցքը, որը նշված է Auto- ն, կլանում է ավելորդ տարածքը, ուստի հղման խնդիրն այսպիսով գծ է տալիս երկու առանցքների կենտրոնում:

Հիմա եկեք օգտագործենք որոշ հատկություններ: Ներկայացրեք 6 ֆիքսված չափի տարրերի մի շարք (գեղեցկության համար), բայց բեռնարկղի չափը փոխելու ունակությամբ: Մենք ուզում ենք հավասարաչափ տարածել դրանք հորիզոնական, որպեսզի դիտարկիչի պատուհանը չափափոխվի, ամեն ինչ լավ տեսք ուներ (առանց @ Media-Recorder!):

Պատրաստ: Մնացած ամեն ինչ գրանցման հարց է: Ստորեւ ներկայացված է Codepen, որը ցույց է տալիս այս օրինակը: Համոզվեք, որ փորձեք ձգվել / քամել զննարկչի պատուհանը եւ տեսնել, թե ինչ է տեղի ունենում:

Եկեք փորձենք որեւէ այլ բան: Պատկերացրեք, որ մեզ անհրաժեշտ է նավարկություն, որը հավասարեցված է աջ եզրին մեր կայքի հենց վերեւում, բայց մենք ուզում ենք, որ այն հավասարեցնի կենտրոնում միջին հաշվով էկրաններին եւ վերածվի փոքրիկի մեկ սյունակի: Ամեն ինչ բավականաչափ պարզ է:

Եկեք ավելի լավ բան փորձենք եւ խաղանք Flex-Elements- ի ճկունությամբ: Ինչպես կողմնորոշված Բջջային սարքեր Երեք շեշտադրման դասավորություն `ամբողջական գլխարկով եւ նկուղով: Եւ գտնվելու վայրի հերթական կարգը:

Եթե \u200b\u200bկարճ եք ասում, ապա Flexbox- ի դասավորությունը մեզ տալիս է մեկ անգամ դժվար առաջադրանքների պարզ լուծումներ: Օրինակ, երբ անհրաժեշտ է հավասարեցնել ուղղահայաց տարրը կամ սեղմել նկուղը էկրանի ներքեւի մասում կամ պարզապես մի քանի բլոկ տեղադրել մեկ շարքի մեջ, որպեսզի նրանք զբաղվեն ամեն ինչ ազատ տարածության մեջ: Նման առաջադրանքները լուծվում են առանց FLEX- ի: Բայց, որպես կանոն, այս լուծումները ավելի շատ նման են «հենակներին». CSS օգտագործելու ընդունելությունները չեն նախատեսվում: Մինչդեռ Flexbox- ի հետ նման առաջադրանքները լուծվում են այնպես, ինչպես կարծում են FLEX մոդելը:

CSS Flexible կուն տուփի դասավորության մոդուլ (CSS մոդուլների մոդուլների համար ճկուն բլոկներով), կարճ FlexBox, որը ստեղծվել է տարբեր HTML կառուցվածքներ ստեղծելիս, ներառյալ տարբեր լայնությունների եւ բարձրության վրա հարմարեցված: Եվ տրամաբանական մոտեցումը, որպես կանոն, աշխատում է անսպասելի վայրերում, որտեղ արդյունքը չի ստուգվել `մեր տրամաբանությունը:

FlexBox- ը թույլ է տալիս նրբագեղորեն վերահսկել տարրերի ամենատարածված պարամետրերը բեռնարկղի ներսում. Ուղղություն, կարգ, լայնություն, բարձրություն, հավասարեցում, ազատ տարածության, ձգման եւ սեղմման բաշխում:

Հիմնական գիտելիք

FlexBox- ը բաղկացած է բեռնարկղից եւ նրա երեխաների տարրերից (իրերից) (ճկուն տարրեր):

Ներառել FlexBox, ցանկացած HTML տարր Բավական է CSS գույքի ցուցադրում նշանակելու համար. FLEX; կամ ցուցադրում. inline-flex; ,

Flex- ի հատկությունները միացնելուց հետո բեռնարկղի ներսում ստեղծվում են երկու առանցք, հիմնական եւ լայնակի (ուղղահայաց (⊥), խաչ առանցք): Հիմնական առանցքի վրա կառուցված են բոլոր բույնի տարրերը (առաջին մակարդակը): Լռելյայն, հիմնական առանցքը հորիզոնական է եւ ունի ուղղություն ձախից աջ (→), եւ խաչի առանցքը, համապատասխանաբար, ուղղահայաց (↓):

Հիմնական եւ խաչ առանցքը կարող են փոփոխվել տեղերում, ապա տարրերը տեղակայվելու են վերեւում (↓) եւ երբ նրանք դադարում են տեղավորվել բարձրության վրա (→) - այսինքն, առանցքների տեղերում , Միեւնույն ժամանակ, տարրերի գտնվելու վայրի սկիզբը եւ ավարտը չի փոխվում. Միայն ուղղություններ (առանցք) փոխվում են: Ահա թե ինչու պետք է պատկերացնել առանցքը բեռնարկղի ներսում: Այնուամենայնիվ, անհրաժեշտ չէ մտածել, որ այնտեղ կան մի քանի «ֆիզիկական» առանցքներ, եւ նրանք ինչ-որ բանի վրա են ազդում: Այստեղ առանցքը միայն տարայի ներսում տարրերի շարժման ուղղությունն է: Օրինակ, եթե մենք նշեցինք հիմնական առանցքի կենտրոնում տարրերի հավասարեցումը, այնուհետեւ փոխեց այս հիմնական առանցքի ուղղությունը, այն կփոխվի եւ հավասարեցնի. Մանրամասները միջին հորիզոնականում էին. . Տես օրինակ:

FLEX տուփի մեկ այլ կարեւոր առանձնահատկություն է տողի առկայությունը լայնակի ուղղությամբ: Հասկանալու համար, թե ինչի մասին ենք խոսում, պատկերացնենք, որ կա հիմնական հորիզոնական առանցք, շատ տարրեր, եւ դրանք «բարձրանում են» բեռնարկղի մեջ, ուստի նրանք գնում են այլ շարքի: Նրանք: Բեռնարկղը այսպիսին է. Բեռնարկղը, դրա ներսում, երկու շարքեր, յուրաքանչյուր շարքում `մի քանի տարրերի համար: Ներկայացվեց: Հիմա հիշեք, որ մենք կարող ենք ուղղահայաց հավասարեցնել ոչ միայն տարրերը, այլեւ շարունակել: Ինչպես է այն լավ երեւում գույքի օրինակով: Եվ այսպես, դա կարծես սխեմատիկ է.

CSS հատկություններՈրը կարող է ազդել դասավորության շինարարության մոդելի վրա. Գունավոր, պարզ, ուղղահայաց-հավասարեցման, սյուները չեն աշխատում Flex Design- ում: Այն օգտագործում է մեկ այլ մոդել, դասավորությունը կառուցելու համար, եւ այս CSS հատկությունները պարզապես անտեսվում են:

CSS հատկությունների FlexBox

FlexBox- ը պարունակում է տարբեր CSS կանոններ, Flex- ի ամբողջ դիզայնը վերահսկելու համար: Ոմանք պետք է կիրառվեն հիմնական բեռնարկղի վրա, իսկ մյուսները այս բեռնարկղի տարրերին:

Բեռնարկղի համար

Ներառում է Flex գույքը իրի համար: Այս գույքի տակ դրա մեջ ներդրված տարրը տուժում է միայն առաջին մակարդակի սերունդները. Դրանք կդառնան բեռնարկղի ֆլեքսի տարրեր:

• Ճամփորդել - Տարրը ձգվում է ամբողջ լայնությամբ եւ ունի իր ամբողջ տարածքը շրջակա բլոկների մեջ: Թշնամուն տեղի է ունենում բլոկի սկզբում եւ վերջում:
• Ներածություն-ֆլեքս - Տարրը պարզվում է այլ տարրերի կողմից: Այս դեպքում նրա ներքին մասը ձեւաչափվում է որպես բլոկային տարր, եւ տարրն ինքնին ներկառուցված է:

flex եւ inline-flex Տարբերվում է այն փաստը, որ տարբեր կերպ շփվում է շրջակա տարրերի հետ, ինչպես ցուցադրումը. Բլոկ եւ ցուցադրում. Ներքին բլոկ:

Փոխում է բեռնարկղի հիմնական առանցքի ուղղությունը: Լայնակի առանցքը փոխվում է համապատասխանաբար:

• row (լռելյայն) - տարրերի ուղղություն ձախից աջ (→)
• սյուն: - տարրերի ուղղություն վերեւից ներքեւ (↓)
• row-Reverse. - ուղղություն տարրերի աջ ձախ կողմում (←)
• Սյուն-հակադարձ: - տարրերի ուղղություն ներքեւից վերեւ ()

Կառավարում է տարրերի փոխանցումը բեռնարկղին:

• nowrap (լռելյայն) - Տեղակայված տարրերը տեղակայված են մեկ շարքում (ուղղության \u003d շարքի ընթացքում) կամ մեկ սյունակում (ուղղությամբ \u003d սյունակ), անկախ նրանից, թե դրանք տեղադրվում են բեռնարկղում, թե ոչ:
• Պատել. - Ներառում է իրերի փոխանցումը հաջորդ շարքին, եթե դրանք տեղադրված չեն բեռնարկղի մեջ: Սա ներառում է միջքաղաքային առանցքի տարրերի տեղաշարժը:
• Փաթաթել: - Նաեւ այն, որ միայն փոխանցումը փաթաթելը չի \u200b\u200bլինի, եւ վեր կսկսվի (հակառակ ուղղությամբ):

Համատեղում է ինչպես Flex-Direction- ը, այնպես էլ Flex-Wrap- ի հատկությունները: Դրանք հաճախ օգտագործվում են միասին, այնպես որ Flex-Flow գույքը ստեղծվել է ավելի քիչ կոդ գրելու համար:

flex-Flow- ը ընդունում է երկու հատկությունների արժեքները, առանձնացված տարածքով: Կամ կարող եք նշել ցանկացած գույքի մեկ արժեք:

/ * Միայն Flex-Direction * / Flex-Flow: Row; Flex-Flow: Row-Reverse; Flex-Flow: սյուն; Flex-Flow: սյունակ-հակադարձ; / * Միայն Flex-փաթեթ * / Flex-հոսք. Nowrap; Flex-Flow: փաթաթված; Flex-Flow: փաթաթել. / * Անմիջապես ինչպես իմաստներ, Flex-Direction եւ Flex-փաթեթ * / Flex-Flow: Row Nowrap; Flex-Flow. Սյունակի փաթեթավորում; Flex-Flow. Սյունակ-հակառակ փաթաթան-հակադարձ; Արդարացնել-բովանդակությունը.

Հավասարեցրեք տարրերը հիմնական առանցքի վրա. Եթե ուղղություն \u003d տող, ապա հորիզոնական, եւ եթե ուղղություն \u003d սյունակ, ապա ուղղահայաց:

• flex-Start (լռելյայն) - տարրերը կգնան սկզբից (վերջում կարող է տեղ լինել):
• flex-End. - տարրերը հավասարվում են մինչեւ վերջ (տեղը կմնա սկզբում)
• Կենտրոն - Կենտրոնում (տեղը կմնա ձախ եւ աջ)
• Տարածություն-միջեւ: - Ծայրահեղ տարրերը սեղմվում են եզրերին (տարրերի միջեւ ընկած տեղը հավասարաչափ բաշխվում է)
• Տարածություն: - Ազատ տարածքը հավասարաչափ բաշխվում է տարրերի միջեւ (ծայրահեղ տարրերը սեղմվում են եզրերի վրա): Բեռնարկղի եզրագծի եւ ծայրահեղ տարրերի միջեւ տարածությունը կլինի երկու անգամ պակաս, քան տողի կեսին տարրերի միջեւ տարածությունը:
• Տիեզերք-հավասարաչափ

Հավասարեցնում է այն շարքերը, որոնցում գտնվում են լայնակի առանցքի տարրերը: Նույնը, ինչ արդարացնել-բովանդակությունը միայն հակառակ առանցքի համար:

Նշում. Աշխատում է, երբ կա առնվազն 2 տող, այսինքն: Եթե \u200b\u200bընդամենը 1 տող կա, ոչինչ չի պատահում:

Նրանք: Եթե \u200b\u200bFlex-Direction. Row, այս գույքը կվերածվի անտեսանելի տողերը ուղղահայաց |. Կարեւոր է նշել, որ բլոկի բարձրացումը պետք է խստորեն սահմանվի եւ պետք է լինի ավելի մեծ, քան շարքի բարձրությունը, հակառակ դեպքում իրենք կթողնեն նրա իմաստը, քանի որ նրանց միջեւ ազատ տեղ չկա: . Բայց երբ Flex-Direction. Սյունակ, այնուհետեւ տողերը շարժվում են հորիզոնական → եւ բեռնարկղի լայնությունը գրեթե միշտ ավելի մեծ է, քան շարքի լայնությունը եւ շարքերն անմիջապես ձեռք են բերում ...

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

Հավասարեցրեք տարրերը տողի ներսում լայնակի առանցքի վրա (անտեսանելի գիծ): Նրանք: Տողերը իրենք հավասարեցված են համահունչ բովանդակության միջոցով, եւ այս տողերի շրջանակներում (տողերը) հավասարեցման միջոցով եւ այս ամենը լայնակի առանցքի միջոցով: Հիմնական առանցքից չկա այդպիսի տարանջատում, շարքի եւ տարրերի հասկացություններ չեն համապատասխանում արդարացված բովանդակության միջոցով:

• Ձգում (լռելյայն) - տարրերը ձգվում են ամբողջությամբ լցնելով լարը
• flex-start. - տարրերը սեղմվում են շարքի սկզբում
• flex-End. - տարրերը ճնշվում են տողի վերջի դեմ
• Կենտրոն - տարրերը հավասարեցնում են շարքի կենտրոնում
• Ելակետ - տարրերը հավասարեցնում են ելակետային տեքստը

Բեռնարկղային տարրերի համար

Նշում է տարայի աճող գործոնը բեռնարկղում ազատ տարածության առկայության մեջ: Լռելյայն Flex-Grow: 0 I.E. Elements- ից ոչ մեկը չպետք է ավելանա եւ լրացնի անվճար տարածքը բեռնարկղում:

Լռելյայն Flex-Grow: 0

• Եթե \u200b\u200bբոլոր տարրերը նշում են Flex-Grow: 1, ապա բոլորը հավասարապես ձգվում են եւ ամեն ինչ ազատ տեղ են լցնում բեռնարկղում:
• Եթե \u200b\u200bտարրերից մեկը ցույց է տալիս Flex-Grow: 1, ապա այն կլրացնի բոլոր ազատ տարածքը բեռնարկղում եւ հավասարեցման միջոցով արդարացված բովանդակության աշխատանքը չի կարողանա աշխատել.
• Երբ Flex-Grow: 1. Եթե \u200b\u200bդրանցից մեկը ունի Flex-Grow: 2, այն կլինի 2 անգամ ավելին, քան բոլորը
• Եթե \u200b\u200bFlex բեռնարկղի ներսում գտնվող Flex բլոկները ունեն Flex-Grow: 3, ապա դրանք նույն չափը կլինեն
• Flex- աճով. 3. Եթե \u200b\u200bդրանցից մեկը ունի Flex-Grow: 12, այն կլինի 4 անգամ ավելին, քան բոլորը

Ինչպես է դա աշխատում? Ենթադրենք, բեռնարկղը ունի 500px լայնություն եւ պարունակում է երկու տարր, որոնցից յուրաքանչյուրը ունի 100px հիմնական լայնությունը: Հետեւաբար, 300 անվճար պիքսել է մնում բեռնարկղում: Այժմ, եթե նշեք Flex-Grow: 2 առաջին տարրը. եւ երկրորդ Flex-Grow: 1; Բլոկները կվերցնեն ամբողջ մատչելի բեռնարկղը, եւ առաջին բլոկի լայնությունը կլինի 300px եւ երկրորդ 200px: Դա բացատրվում է այն փաստով, որ բեռնարկղում առկա 300px ազատ տարածքը բաժանվել է 2: 1-ի եւ + 100px երկրորդի տարրերի միջեւ:

Նշում. Այն արժեքի մեջ, որը կարող եք նշել Կոտորակային համարներՕրինակ, 0,5 - Flex-Grow: 0.5

Նշում է տարրի կրճատման գործոնը: Հատկությունը հակառակ Flex- աճող է եւ որոշում է, թե ինչպես պետք է տարրը սեղմվի, եթե բեռնարկղում ազատ տեղ չկա: Նրանք: Գույքը սկսում է աշխատել, երբ բոլոր տարրերի չափերի գումարը ավելի մեծ է, քան բեռնարկղի չափը:

Լռելյայն Flex-Shrink: 1

Ենթադրենք, որ բեռնարկղը ունի 600px լայնություն եւ պարունակում է երկու տարր, որոնցից յուրաքանչյուրը ունի 300px լայնություն `Flex-soft: , Նրանք: Երկու տարր ամբողջությամբ լցնում են բեռնարկղը: Առաջին տարրը ցույց կտա Flex-Shrink: 2; եւ երկրորդ Flex-Shrink. 1; , Այժմ բեռնարկղի լայնությունը նվազեցնելով 300px, I.e. Elements- ը պետք է լինի 300px, որը գտնվում է բեռնարկղի ներսում: Դրանք սեղմված կլինեն 2: 1 հարաբերակցությամբ, այսինքն: Առաջին միավորը կմիանա 200PX, իսկ երկրորդը `100px եւ տարրերի նոր չափսերը կլինեն 100px եւ 200PX:

Նշում. Արժեքում կարող եք նշել կոտորակային համարները, օրինակ `0.5 - Flex-Shrink: 0.5

Կարգավորում է տարրի հիմնական լայնությունը `կտառվի տարրի լայնության վրա ազդող մնացած պայմաններից առաջ: Արժեքը կարելի է նշել PX, EM, REM,%, VW, VH եւ այլն: Վերջնական լայնությունը կախված կլինի բազային լայնությունից եւ Flex-Grow- ի արժեքների, ֆլեքս-նեղացման եւ բլոկի ներսում բովանդակության մեջ: Ավտոմատով տարրը ստանում է հիմնական լայնությունը դրա ներսում պարունակության համեմատ:

Լռելյայն, ավտոմատ

Երբեմն ավելի լավ է, որ տարրի լայնությունը կոշտ տեղադրվի սովորական լայնության գույքի միջոցով: Օրինակ, լայնությունը `50%; Դա կնշանակի, որ բեռնարկղի ներսում գտնվող տարրը կլինի ճիշտ 50%, սակայն Flex-Grow եւ Flex-Shrink- ի հատկությունները նույնպես կաշխատեն: Դա կարող է անհրաժեշտ լինել, երբ տարրը ձգվում է դրա ներսում պարունակությամբ, ավելի շատ նշված է Flex- ի հիմունքներով: Օրինակ.

flex- ի հիմքը կլինի «կոշտ», եթե վերականգնվի առաձգականությունը եւ սեղմումը. Flex-soft: 200px; Flex-Grow: 0; Flex-Shrink: 0; , Այս ամենը կարելի է գրել որպես Flex: 0 0 200px; ,

Երեք հատկությունների կարճ ձայնագրում. Flex-Grow Flex-Shrink Flex- ի հիմքը:

Լռելյայն, FLEX: 0 1 AUTO

Այնուամենայնիվ, դուք կարող եք նշել մեկ եւ երկու արժեք.

Flex: Ոչ մեկը; / * 0 0 ավտոմատ * / / * համարը * / FLEX: 2; / * Flex-Grow (Flex- ի հիմքը գնում է 0) * / / * Ոչ մի համար * / FLEX: 10EM; / * Flex-հիմք. 10EM * / FLEX: 30px; / * Flex-հիմք `30px * / Flex: Auto; / * Flex-հիմք. Auto * / Flex: բովանդակություն; / * Flex-հիմք. Բովանդակություն * / FLEX: 1 30px; / * Flex-Grow եւ Flex-հիմք * / Flex: 2 2; / * Flex-Grow եւ Flex-Shrink (Flex- ի հիմքը գնում է 0) * / FLEX: 2 2 10%; / * Flex-Grow եւ Flex-Shrink եւ Flex-Hair * / Align- Self.

Թույլ է տալիս փոխել հավասարեցման կետերը, միայն առանձին կետի համար:

Լռելյայն. Align-Items բեռնարկղից

• Ձգվել: - տարրը ձգվում է ամբողջությամբ լցնելով լարը
• flex-start. - տարրը սեղմվում է գծի սկզբում
• flex-End. - տարրը սեղմվում է տողի վերջում
• Կենտրոն - տարրը հավասարեցված է գծի կենտրոնում

Ելակետ - Տարրը հավասարեցված է տեքստի հիմնական տողից

Թույլ է տալիս փոխել տարրի կարգը (դիրքը, դիրքը) ընդհանուր շարքում:

Լռելյայն, Պատվեր, 0

Ըստ լռելյայն, տարրերը ունեն պատվեր. 0 եւ դրված իրենց տեսքի կարգը HTML կոդում եւ շարքի ուղղությամբ: Բայց եթե փոխեք պատվերի գույքի արժեքը, իրերը կկառուցվեն արժեքների կարգով. -1 0 1 2 3 ... Օրինակ, եթե առարկաներից մեկը նշում է կարգը. 1, ապա նախ կշարունակեք բոլոր զրո, ապա 1-ից մի տարր:

Այսպիսով, հնարավոր է, օրինակ, առաջին տարրը վերածվելու համար, միաժամանակ չփոխելով այլ տարրերի կամ HTML կոդի շարժման ուղղությունը:

Նշումներ

Որն է տարբերությունը Flex- ի միջեւ լայնությունից:

Flex եռուցման եւ լայնության միջեւ կարեւոր տարբերություններ.

flex- ի հիմքը գործում է միայն հիմնական առանցքի համար: Սա նշանակում է, որ երբ Flex-Direction. Row Flex- ի հիմքը վերահսկում է լայնությունը (լայնությունը), իսկ երբ Flex-Direction. Column- ը վերահսկում է բարձրությունը (բարձրությունը): ,

flex- ի հիմքը վերաբերում է միայն Flex տարրերին: Այսպիսով, եթե անջատեք Flex- ը բեռնարկղում, այս գույքը չի ունենա ազդեցություն:

Բեռնարկղերի բացարձակ տարրերը չեն մասնակցում Flex նախագծմանը ... Եվ, հետեւաբար, Flex- ի հիմքը չի ազդում Flex բեռնարկղի տարրերի վրա, եթե դրանք բացարձակապես դիրքավորված են: Նրանց պետք է հստակեցնել լայնությունը / բարձրությունը:

• Flex հատկություններ օգտագործելիս 3 արժեքներ (Flex-Grow / Flex-Shrink / Flex- ի հիմք), կարող եք մի փոքր համատեղել եւ գրել, եւ լայնության համար անհրաժեշտ է գրել կամ նեղանալ: Օրինակ, FLEX: 0 0 50% \u003d\u003d Լայնություն, 50%; Flex-Shrink: 0; , Երբեմն դա պարզապես անհարմար է:

Հնարավորության դեպքում, դեռեւս նախապատվությունը տալիս է Flex- ի հիմքը: Օգտագործեք լայնությունը միայն այն դեպքում, երբ Flex- ի հիմքը հարմար չէ:

Տարբերությունները Flex- ի հիմքը լայնությունից `սխալ կամ ֆիչք:

Flex Element- ի ներսում պարունակությունը կրճատում է այն եւ չի կարող դուրս գալ իր սահմաններից: Այնուամենայնիվ, եթե լայնությունը դնում եք լայնության կամ առավելագույն լայնության միջոցով, եւ ոչ թե Flex- ի հիմքը, Flex բեռնարկղի ներսում գտնվող տարրը կկարողանա դուրս գալ այս բեռնարկղից (երբեմն անհրաժեշտ է այս պահվածքի համար): Օրինակ:

FLEX դասավորության օրինակներ

Օրինակներում, ցանկացած վայրում պատկերացնում է նախածանցներ խաչմերուկի համար: Ես դա արեցի CSS- ի հարմար ընթերցանության համար: Հետեւաբար տեսեք վերջին օրինակները: chrome- ի տարբերակները կամ Firefox:

# 1 Պարզ օրինակ ուղղահայաց հավասարեցմամբ եւ հորիզոնական

Սկսենք ամենապարզ օրինակից `ուղղահայաց եւ հորիզոնական մակարդակի վրա միաժամանակ եւ բլոկի ցանկացած բարձրության վրա, նույնիսկ ռետինե:

Կամ այդպես, առանց բլոկի ներսում.

# 1.2 բաժանում (բացը) Flex բլոկի տարրերի միջեւ

Տեղադրելու համար տարայի տարրերը եզրերի վրա եւ կամայականորեն ընտրեք տարրը, որից հետո ընդմիջում կլինի, դուք պետք է օգտագործեք մարժայի ձախ գույքը. Ավտոմատ կամ մարժա:

# 2 հարմարվող մենյու Flex- ում

Page անկում կատարել ընտրացանկ: Լայն էկրանին այն պետք է լինի ճիշտ: Միջին հաշվով, մեջտեղում հավասարեցված: Եվ մի փոքր մեկ տարրի վրա պետք է լինի նոր գծի վրա:

# 3 հարմարվողական 3 սյուն

Այս օրինակը ցույց է տալիս, թե որքան արագ եւ հարմար է 3 սյուներ, որոնք, նեղանալիս, կվերածվեն 2-ի, իսկ հետո, 1-ում:

Խնդրում ենք նկատի ունենալ, որ դա կարելի է անել առանց մեդիա կանոններ օգտագործելու, բոլորը Flex:

Գնացեք jsfidlede.net եւ փոխեք «արդյունքի» բաժնի լայնությունը

# 4 հարմարվողական բլոկներ Flex- ի վրա

Ենթադրենք, մենք պետք է հանենք 3 բլոկ, մեկ մեծ եւ երկու փոքր: Միեւնույն ժամանակ անհրաժեշտ է, որ բլոկները տեղավորվեն փոքր էկրանների մեջ: Կատարել.

Գնացեք jsfidlede.net եւ փոխեք «արդյունքի» բաժնի լայնությունը

# 5 պատկերասրահ Flex եւ Transition

Այս օրինակը ցույց է տալիս, թե որքան արագ կարող եք գեղեցիկ աչքի ակորդեոն պատրաստել ֆլեքսով նկարներով: Ուշադրություն դարձրեք Flex- ի անցումային գույքին:

# 6 FLEX FLEX (պարզապես օրինակ)

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

Այս խնդիրը լուծելու համար բլոկներն իրենք ձգվում են Flex- ի միջոցով եւ տեղադրվում է առավելագույն հնարավոր լայնությունը: Յուրաքանչյուր ներքին ստորաբաժանում նույնպես դիզայնով ճկուն է, ֆլեքս-ուղղությամբ. Սյունակ; եւ տարրը մեջտեղում (որտեղ գտնվում է տեքստը) ձգված Flex-Grow: 1; Լրացնելու բոլոր ազատ տարածքը, արդյունքը ձեռք է բերվում. Տեքստը սկսվեց մեկ տողով ...

Լրացուցիչ օրինակներ

Զննարկչի աջակցությունը `98.3%

Իհարկե, ամբողջական աջակցություն չկա, բայց ամեն ինչ Ժամանակակից զննարկիչներ Աջակցեք FlexBox- ի ձեւավորումներին: Ոմանց համար դուք դեռ պետք է նշեք նախածանցները: Իրական նկարի համար նայեք Caniuse.com- ում եւ տեսեք, որ այսօր օգտագործված զննարկչի 96.3% -ը կաշխատի առանց նախածանցների, 98.3% նախածանցով: Սա հիանալի ցուցանիշ է `FlexBox- ը համարձակորեն օգտագործելու համար:

Իմանալ, թե այսօր ինչ նախածանցներ են (2019 թվականի հունիս), ես կտամ բոլոր Flex կանոնների օրինակ Անհրաժեշտ նախածանցներ:

/ * Կոնտեյներ * / .fex (ցուցադրում. -Webkit-box; ցուցադրում. -MS-FlexBox; ցուցադրում, ցուցադրում. -MS-INLOW-FLEXBOX; -Էբկիթ-արկղ-կողմնորոշիչ. Ուղղահայաց; -webkit-box-Formation: -Flex-հոսք. Սյունակի փաթաթում; Flex-Flow: Column Wrap; -webkit-Box-Pack. Հիմնավորեք; Արդարացրեք-բովանդակություն. Բաշխել; համահունչ; տարածություն.) / * Տարրեր * / .flex-Ither (-s -ms-Flex- ի. 1; Flex-Flex- Բացասական. 2; Flex-Shrink: 2; -MS-Flex- ի նախընտրելի չափը, 100px; Flex-soft: 100PX; 1 2 100px; Կենտրոն; համացանցային. Կենտրոն; -webkit-box-soldic-group. 3; -MS-Flex-Order: 2; Order: 2;)

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

• (Նոր) - Նոր շարահյուսություն. Display ուցադրում. Flex; ,
• (Tweener) - Old Unonofial Syntax 2011: Display ուցադրում, FlexBox; ,
• (Հին) - Հին Syntax 2009: Display ուցադրում, տուփ;

Տեսանյութ

Դե, մի մոռացեք տեսանյութի մասին, երբեմն էլ հետաքրքիր եւ հասկանալի է: Ահա մի քանի հանրաճանաչ.

Օգտակար հղումներ FLEX- ի համար

flexBoxFroggy.com - Flexbox կրթական խաղ:

Flexplorer- ը Visual Flex Code Designer է: