Wordpress հորիզոնական մենյու css flexbox. Flexbox միջերեսների համար. հիմնական նախշեր: HTML5 կոնտեյների ստեղծում
Մի խոսքով, դասավորությունը Flexbox-ով մեզ տալիս է պարզ լուծումներմեկ անգամ դժվար առաջադրանքներ. Օրինակ, երբ անհրաժեշտ է որևէ տարր ուղղահայաց հարթեցնել, կամ էջատակը սեղմել էկրանի ներքևի մասում, կամ պարզապես տեղադրել մի քանի բլոկ մեկ շարքում, որպեսզի նրանք գրավեն ամբողջ ազատ տարածքը: Նմանատիպ խնդիրները լուծվում են առանց ճկունության: Բայց որպես կանոն, այս լուծումներն ավելի շատ նման են «հենակների»՝ css-ն այլ նպատակներով օգտագործելու հնարքներ։ Մինչդեռ flexbox-ի դեպքում նման խնդիրները լուծվում են ճիշտ այնպես, ինչպես պատկերացնում է flex մոդելը:
CSS Flexible Box Layout Module (CSS մոդուլ ճկուն բլոկներով դասավորության համար), կարճ ասած, flexbox-ը ստեղծվել է HTML-ի լայն տեսականի կառուցվածքների ստեղծման ժամանակ թերությունները վերացնելու, ներառյալ տարբեր լայնություններին և բարձրություններին հարմարեցվածների, և դասավորությունը տրամաբանական և պարզ դարձնելու համար: . Իսկ տրամաբանական մոտեցումը, որպես կանոն, գործում է անսպասելի վայրերում, որտեղ արդյունքը չի ստուգվել՝ տրամաբանությունը մեր ամեն ինչն է։
Flexbox-ը թույլ է տալիս նրբագեղորեն կառավարել տարայի ներսում գտնվող տարրերի մի շարք պարամետրեր՝ ուղղություն, կարգ, լայնություն, բարձրություն, հավասարեցում երկայնքով և երկայնքով, ազատ տարածության բաշխում, ձգվող և փոքրացող տարրեր:
Հիմնական գիտելիք
FlexBox-ը բաղկացած է կոնտեյներից և դրա Child Elements-ից (տարրեր) (ճկուն տարրեր):
Flexbox-ը միացնելու համար ցանկացած անձ HTML տարրբավական է նշանակել css հատկությունը display:flex; կամ ցուցադրել:inline-flex; .
Flex հատկությունը միացնելուց հետո տարայի ներսում ստեղծվում է երկու առանցք՝ հիմնական և լայնակի (ուղղահայաց (⊥), խաչաձև առանցք: Բոլոր բնադրված տարրերը (առաջին մակարդակի) դասավորված են հիմնական առանցքի երկայնքով: Լռելյայնորեն, հիմնական առանցքը հորիզոնական է և ունի ուղղություն ձախից աջ (→), իսկ խաչաձև առանցքը համապատասխանաբար ուղղահայաց է և ուղղված է վերևից ներքև (↓):
Հիմնական և խաչաձև առանցքները կարող են փոխանակվել, այնուհետև տարրերը կտեղակայվեն վերևից ներքև (↓) և երբ նրանք այլևս չեն տեղավորվում բարձրության վրա, նրանք կտեղափոխվեն ձախից աջ (→), այսինքն, առանցքները պարզապես փոխվեցին: Այս դեպքում տարրերի դասավորության սկիզբը և վերջը չի փոխվում. փոխվում են միայն ուղղությունները (առանցքները): Ահա թե ինչու պետք է կացիններ մտածել տարայի ներսում: Սակայն չպետք է կարծել, թե այնտեղ ինչ-որ «ֆիզիկական» կացիններ կան և դրանք ինչ-որ բանի վրա են ազդում։ Այստեղ առանցքը միայն տարայի ներսում տարրերի շարժման ուղղությունն է: Օրինակ, եթե մենք նշել ենք տարրերի հավասարեցումը հիմնական առանցքի կենտրոնին և այնուհետև փոխել այս հիմնական առանցքի ուղղությունը, ապա հավասարեցումը նույնպես կփոխվի. Տես օրինակ:
Flexbox-ի մեկ այլ կարևոր առանձնահատկությունը լայնակի ուղղությամբ տողերի առկայությունն է: Որպեսզի հասկանանք, թե ինչի մասին է խոսքը, եկեք պատկերացնենք, որ կա հիմնական հորիզոնական առանցք, շատ տարրեր և դրանք չեն «մագլցում» տարայի մեջ, ուստի տեղափոխվում են մեկ այլ շարք։ Նրանք. տարան այսպիսի տեսք ունի՝ տարա, ներսում երկու շարք կա, յուրաքանչյուր տող ունի մի քանի տարր։ Ներկայացրե՞լ է: Եվ հիմա հիշեք, որ մենք կարող ենք ուղղահայաց հավասարեցնել ոչ միայն տարրերը, այլև տողերը: Ինչպես է այն աշխատում, հստակ երևում է օրինակում: Եվ սա սխեմատիկ տեսք ունի.
CSS հատկություններ, որը կարող է ազդել դասավորության շենքի մոդելի վրա. float , հստակ , ուղղահայաց հարթեցում , սյուները չեն աշխատում ճկուն կոնստրուկցիաներում։ Այստեղ օգտագործվում է դասավորության այլ մոդել, և այս css հատկությունները պարզապես անտեսվում են:
Flexbox CSS-ի հատկությունները
Flexbox-ը պարունակում է տարբեր css կանոններըկառավարել ամբողջ ճկուն կառուցվածքը: Ոմանք պետք է կիրառվեն հիմնական տարայի վրա, իսկ մյուսները՝ այս տարայի տարրերին:
Կոնտեյների համար
ցուցադրել:Միացնում է ֆլեքս հատկությունը տարրի համար: Ինքը՝ տարրը և դրա մեջ տեղադրված տարրերը պատկանում են այս հատկությանը. տուժում են միայն առաջին մակարդակի հետնորդները. նրանք կդառնան ճկուն կոնտեյների տարրեր։
- ճկել- տարրը ձգվում է ամբողջ լայնությամբ և ունի իր ամբողջ տարածությունը շրջակա բլոկների միջև: Բլոկի սկզբում և վերջում կա տողերի ընդմիջում:
- inline-flex- տարրը փաթաթված է այլ տարրերով: Միևնույն ժամանակ, դրա ներքին մասը ձևակերպվում է որպես բլոկի տարր, իսկ տարրը ինքնին ձևաչափվում է որպես ներդիր տարր:
flex-ը և inline-flex-ը տարբերվում են նրանով, որ նրանք տարբեր կերպ են փոխազդում շրջակա տարրերի հետ՝ նման է display:block-ին և display:inline-block-ին:
ճկուն ուղղություն:Փոխում է տարայի հիմնական առանցքի ուղղությունը: Համապատասխանաբար փոխվում է լայնակի առանցքը:
- տող (կանխադրված)- տարրերի ուղղությունը ձախից աջ (→)
- սյունակ- տարրերի ուղղությունը վերևից ներքև (↓)
- շարք հակառակ- տարրերի ուղղությունը աջից ձախ (←)
- սյունակի հակառակ կողմը- տարրերի ուղղությունը ներքևից վեր ()
Վերահսկում է տարրերի փաթաթումը, որոնք չեն տեղավորվում տարայի մեջ:
- nowrap (կանխադրված)- բնադրված տարրերը դասավորված են մեկ տողում (ուղղությամբ=տողով) կամ մեկ սյունակում (ուղղությամբ=սյունակով)՝ անկախ նրանից՝ դրված են տարայի մեջ, թե ոչ։
- պատել- ներառում է տարրերի տեղափոխումը հաջորդ շարք, եթե դրանք չեն տեղավորվում տարայի մեջ: Սա հնարավորություն է տալիս տարրերի շարժումը լայնակի առանցքի երկայնքով:
- հակադարձ փաթաթել- նույնը, ինչ փաթաթել միայն փոխանցումը չի լինի ներքև, այլ վերև (հակառակ ուղղությամբ):
Համատեղում է ինչպես ճկուն ուղղության, այնպես էլ ճկուն փաթաթման հատկությունները: Նրանք հաճախ օգտագործվում են միասին, ուստի flex-flow հատկությունը ստեղծվել է ավելի քիչ կոդ գրելու համար:
flex-flow-ը վերցնում է այս երկու հատկությունների արժեքները՝ բաժանված բացատով: Կամ դուք կարող եք նշել մեկ արժեք ցանկացած գույքի համար:
/* flex-direction only */ flex-flow: row; flex-flow: շարք-հակադարձ; flex-flow: սյունակ; flex-flow: սյունակ-հակադարձ; /* միայն flex-wrap */ flex-flow: nowrap; flex-flow: փաթաթել; flex-flow: wrap-reverse; /* երկու արժեքները միանգամից՝ flex-direction և flex-wrap */ flex-flow՝ row nowrap; flex-flow: սյունակի փաթաթան; flex-flow: սյունակ-հակադարձ փաթաթան-հակադարձ; justify-content:
Հավասարեցնում է տարրերը հիմնական առանցքի երկայնքով՝ եթե ուղղություն=շարք, ապա հորիզոնական, և եթե ուղղություն=սյունակ, ապա ուղղահայաց։
- ճկուն սկիզբ (կանխադրված)- տարրերը կգնան սկզբից (վերջում կարող է տեղ լինել):
- ճկուն վերջ- տարրերը դասավորված են վերջում (տեղը կմնա սկզբում)
- կենտրոն- կենտրոնում (տեղը կմնա աջ և ձախ)
- միջեւ տարածություն- ծայրահեղ տարրերը սեղմված են եզրերին (տարրերի միջև տարածությունը հավասարաչափ բաշխված է)
- տարածություն շուրջը- ազատ տարածությունը հավասարաչափ բաշխված է տարրերի միջև (ծայրահեղ տարրերը չեն սեղմվում եզրերին): Տարայի եզրի և ծայրամասային տարրերի միջև եղած տարածությունը կկազմի շարքի մեջտեղի տարրերի միջև եղած տարածության կեսը:
- տարածություն-հավասարաչափ
Հավասարեցնում է լայնակի առանցքի երկայնքով տարրեր պարունակող տողերը: Նույնը՝ արդարացնել-բովանդակությունը, բայց հակառակ առանցքի համար:
Նշում. Գործում է, երբ կա առնվազն 2 տող, այսինքն. եթե ընդամենը 1 տող լինի, ոչինչ չի լինի։
Նրանք. եթե flex-direction՝ row, ապա այս հատկությունը կհավասարեցնի անտեսանելի տողերը ուղղահայաց ¦: Այստեղ կարևոր է նշել, որ բլոկի բարձրությունը պետք է կոշտ դրվի և պետք է լինի ավելի մեծ, քան տողերի բարձրությունը, հակառակ դեպքում տողերն իրենք կձգեն բեռնարկղը, և դրանց ցանկացած դասավորությունը կորցնում է իր նշանակությունը, քանի որ ազատ տարածություն չկա: նրանց միջև... Բայց երբ ճկուն ուղղություն՝ սյունակ , ապա տողերը շարժվում են հորիզոնական → և տարայի լայնությունը գրեթե միշտ ավելի մեծ է, քան տողերի լայնությունը, և տողերի հավասարեցումը անմիջապես իմաստ ունի...
- ձգվել (կանխադրված)- շարքերը ձգվում են՝ շարքն ամբողջությամբ լցնելու համար
- ճկուն մեկնարկ- շարքերը խմբավորված են տարայի վերևում (վերջում կարող է տեղ լինել):
- ճկուն վերջ- տողերը խմբավորված են տարայի ներքևի մասում (տեղը կմնա սկզբում)
- կենտրոն- շարքերը խմբավորված են տարայի կենտրոնում (տեղը կմնա ծայրերում)
- միջեւ տարածություն- ծայրահեղ շարքերը սեղմված են եզրերին (տողերի միջև տարածությունը հավասարաչափ բաշխված է)
- տարածություն շուրջը- ազատ տարածությունը հավասարաչափ բաշխված է տողերի միջև (ծայրահեղ տարրերը սեղմված չեն եզրերին): Տարայի եզրի և ծայրամասային տարրերի միջև եղած տարածությունը կկազմի շարքի մեջտեղի տարրերի միջև եղած տարածության կեսը:
- տարածություն-հավասարաչափ- նույնը, ինչ տարածության շուրջը, միայն ծայրահեղ տարրերի հեռավորությունը տարայի եզրերին նույնն է, ինչ տարրերի միջև:
Հավասարեցնում է տարրերը լայնակի առանցքի երկայնքով մի շարքում (անտեսանելի շարք): Նրանք. տողերն իրենք հավասարեցվում են align-content-ի միջոցով, իսկ այս տողերի (տողերի) ներսում գտնվող տարրերը՝ align- տարրերի միջով և այս ամենը լայնակի առանցքի երկայնքով: Հիմնական առանցքի երկայնքով նման տարանջատում չկա, չկա տողերի հասկացություն, և տարրերը հավասարեցված են՝ օգտագործելով justify-content ։
- ձգվել (կանխադրված)- տարրերը ձգվում են գիծն ամբողջությամբ լցնելու համար
- ճկուն մեկնարկ- տարրերը սեղմված են շարքի սկզբին
- ճկուն վերջ- տարրերը սեղմված են շարքի վերջում
- կենտրոն- տարրերը դասավորված են շարքի կենտրոնում
- բազային- տարրերը հավասարեցվում են տեքստի բազային
Կոնտեյների տարրերի համար
flex-grow:Նշում է տարրը մեծացնելու գործոնը, երբ տարայի մեջ ազատ տարածություն կա: Կանխադրված ճկուն աճ՝ 0, այսինքն. տարրերից ոչ մեկը չպետք է աճի և լրացնի տարայի ազատ տարածությունը:
Կանխադրված ճկուն աճ՝ 0
- Եթե բոլոր տարրերի համար նշեք flex-grow:1, ապա դրանք բոլորը ձգվում են նույն կերպ և լրացնում են տարայի ամբողջ ազատ տարածությունը:
- Եթե տարրերից մեկի համար նշեք flex-grow:1, ապա այն կլցնի կոնտեյների ամբողջ ազատ տարածքը, և justify-content-ի միջոցով հավասարեցումը այլևս չի աշխատի. հավասարեցնելու ազատ տարածություն չկա...
- Flex-grow-ով:1. Եթե դրանցից մեկն ունի ճկուն աճ:2, ապա այն 2 անգամ ավելի մեծ կլինի, քան մյուսները
- Եթե ֆլեքս կոնտեյների ներսում գտնվող բոլոր ճկուն տուփերը ունեն ճկուն աճ:3, ապա դրանք կլինեն նույն չափը:
- Flex-grow-ով:3. Եթե դրանցից մեկը ունի flex-grow:12, ապա այն 4 անգամ ավելի մեծ կլինի, քան մյուսները
Ինչպես է դա աշխատում? Ենթադրենք, կոնտեյները ունի 500px լայնություն և պարունակում է երկու տարր, որոնցից յուրաքանչյուրը բազային լայնությամբ 100px է: Այսպիսով, կոնտեյների մեջ մնացել է 300 անվճար պիքսել: Այժմ, եթե առաջին տարրը դնենք flex-grow:2; , իսկ երկրորդը flex-grow՝ 1; , ապա բլոկները կզբաղեցնեն տարայի ողջ հասանելի լայնությունը և առաջին բլոկի լայնությունը կլինի 300px, իսկ երկրորդի լայնությունը՝ 200px։ Սա բացատրվում է նրանով, որ տարայի մեջ առկա 300px ազատ տարածությունը բաշխվել է տարրերի միջև՝ 2:1, +200px առաջինի և +100px երկրորդի հարաբերակցությամբ:
Նշում. արժեքի մեջ կարող եք նշել կոտորակային թվեր, օրինակ՝ 0.5 - flex-grow:0.5
flex-shrink:Նշում է տարրի կրճատման գործակիցը: Հատկությունը հակադրվում է flex-grow-ին և որոշում է, թե ինչպես պետք է տարրը փոքրանա, եթե տարայի մեջ ազատ տարածություն չմնա: Նրանք. գույքը սկսում է աշխատել, երբ բոլոր տարրերի չափերի գումարը մեծ է, քան տարայի չափը:
Լռելյայն ճկունություն՝ 1
Ենթադրենք, կոնտեյները ունի 600px լայնություն և պարունակում է երկու տարր, յուրաքանչյուրը 300px լայնություն - flex-basis:300px; . Նրանք. երկու տարր ամբողջությամբ լցնում են տարան: Եկեք նշենք flex-shrink. 2 առաջին տարրի համար; , իսկ երկրորդ ճկունությունը՝ 1; . Այժմ եկեք կրճատենք տարայի լայնությունը 300px-ով, այսինքն. տարայի ներսում տեղավորվելու համար տարրերը պետք է փոքրանան 300px-ով: Դրանք կսեղմվեն 2:1 հարաբերակցությամբ, այսինքն. առաջին բլոկը կնվազի 200px-ով, իսկ երկրորդը 100px-ով, իսկ նոր տարրերի չափերը կլինեն 100px և 200px:
Նշում. արժեքի մեջ կարող եք նշել կոտորակային թվեր, օրինակ՝ 0.5 - ճկուն-կծկվել:0.5
ճկուն հիմք:Սահմանում է տարրի հիմքի լայնությունը. հաշվարկվում է լայնությունը մինչև տարրի լայնության վրա ազդող ցանկացած այլ պայմանների: Արժեքը կարող է նշվել px, em, rem, %, vw, vh և այլն: Վերջնական լայնությունը կախված կլինի բազայի լայնությունից և flex-grow, flex-shrink և բլոկի ներսում պարունակության արժեքներից: Ավտոմատի միջոցով տարրը ստանում է հիմքի լայնություն՝ իր ներսում գտնվող բովանդակության համեմատ:
Կանխադրված՝ ավտոմատ
Երբեմն ավելի լավ է կոշտ կոդավորել տարրի լայնությունը՝ օգտագործելով ծանոթ լայնության հատկությունը: Օրինակ, լայնությունը `50%; կնշանակի, որ տարայի ներսում տարրը կկազմի ուղիղ 50%, այնուամենայնիվ, ճկուն աճի և ճկուն-կծկվող հատկությունները դեռ կգործեն: Սա կարող է անհրաժեշտ լինել, երբ տարրը ձգվում է դրա ներսում գտնվող բովանդակությամբ, ավելին, քան նշված է flex-base-ում: Օրինակ.
flex-basis-ը «կոշտ» կլինի, եթե ձգումը և նեղացումը զրոյի սահմանվեն. flex-basis:200px; flex-grow:0; ճկուն-կծկվել:0; . Այս ամենը կարելի է գրել flex:0 0 200px; .
ճկունություն.Երեք հատկությունների սղագրություն. flex-grow flex-shrink flex-basis:
Կանխադրված՝ ճկունություն՝ 0 1 ավտոմատ
Այնուամենայնիվ, դուք կարող եք նշել մեկ կամ երկու արժեք.
Flex՝ ոչ մի; /* 0 0 ավտոմատ */ /* համարը */ flex: 2; /* flex-grow (flex-basis-ը գնում է 0-ի) */ /* ոչ մի թիվ */ flex: 10em; /* flex-basic՝ 10em */ flex՝ 30px; /* flex-basic՝ 30px */ flex: auto; /* flex-basis` auto */ flex` content; /* flex-basic՝ բովանդակություն */ flex՝ 1 30px; /* flex-grow and flex-basic */ flex: 2 2; /* flex-grow and flex-shrink (flex-basis գնում է 0) */ flex: 2 2 10%; /* flex-grow and flex-shrink and flex-basis */ align-self:
Թույլ է տալիս փոխել align-iters հատկությունը միայն մեկ տարրի համար:
Կանխադրված՝ բեռնարկղի հավասարեցման տարրերից
- ձգվել- տարրը ձգվում է գիծն ամբողջությամբ լցնելու համար
- ճկուն մեկնարկ- տարրը սեղմված է գծի սկզբին
- ճկուն վերջ- տարրը սեղմված է գծի վերջում
- կենտրոն- տարրը հավասարեցված է գծի կենտրոնին
բազային- տարրը հավասարեցված է տեքստի բազային
Թույլ է տալիս փոխել տարրի հերթականությունը (դիրքը, դիրքը) ընդհանուր շարքում:
Կանխադրված՝ պատվեր՝ 0
Լռելյայնորեն տարրերն ունեն հերթականություն՝ 0 և տեղադրվում են HTML կոդում իրենց տեսքի և տողի ուղղությամբ: Բայց եթե փոխեք պատվերի հատկության արժեքը, ապա տարրերը կշարվեն ըստ արժեքների հերթականության՝ -1 0 1 2 3 ... : Օրինակ, եթե տարրերից մեկի համար նշեք կարգը՝ 1, ապա նախ բոլոր զրոները կմտնեն, իսկ հետո՝ 1-ով տարրը:
Այսպիսով, դուք կարող եք, օրինակ, նետել առաջին տարրը մինչև վերջ՝ չփոխելով մնացած տարրերի կամ HTML կոդի շարժման ուղղությունը։
Նշումներ
Ինչպե՞ս է flex-basis-ը տարբերվում լայնությունից:
Ստորև բերված են ճկուն հիմքի և լայնության/բարձրության կարևոր տարբերությունները.
- Flex 3 հատկությունն օգտագործելիս արժեքները (flex-grow/flex-shrink/flex-basis) կարող են համակցվել և կարճ գրվել, մինչդեռ լայնության աճի կամ կրճատման համար պետք է գրվեն առանձին: Օրինակ՝ flex:0 0 50% == լայնություն:50%; ճկուն-կծկվել:0; . Երբեմն դա պարզապես անհարմար է:
flex-basis-ն աշխատում է միայն հիմնական առանցքի համար: Սա նշանակում է, որ flex-direction:row flex-basis-ով վերահսկում է լայնությունը (լայնությունը), իսկ flex-direction:column-ով վերահսկում է բարձրությունը (բարձրությունը): .
Flex-basis-ը վերաբերում է միայն ֆլեքս տարրերին: Սա նշանակում է, որ եթե անջատեք ֆլեքսը կոնտեյների վրա, այս հատկությունը ոչ մի ազդեցություն չի ունենա:
Բացարձակ կոնտեյների տարրերը չեն մասնակցում ճկուն կառուցվածքներին... Սա նշանակում է, որ flex-basis-ը չի ազդում կոնտեյների ճկուն տարրերի վրա, եթե դրանք բացարձակ դիրք են:absolute : Նրանք պետք է նշեն լայնությունը / բարձրությունը:
Հնարավորության դեպքում, միևնույն է, նախընտրեք ճկուն հիմքը: Օգտագործեք լայնությունը միայն այն դեպքում, երբ ճկուն հիմքը չի տեղավորվում:
Ճկուն հիմքի և լայնության միջև տարբերությունը վրիպակ է, թե՞ հատկանիշ:
Flex տարրի ներսում պարունակությունը ընդլայնում է այն և չի կարող դուրս գալ դրանից այն կողմ: Այնուամենայնիվ, եթե լայնությունը սահմանեք լայնությամբ կամ առավելագույն լայնությամբ, այլ ոչ թե ճկուն հիմքով, ապա ճկուն կոնտեյների ներսում գտնվող տարրը կկարողանա դուրս գալ այս կոնտեյներից (երբեմն այս պահվածքն անհրաժեշտ է): Օրինակ:
Flex դասավորության օրինակներ
Օրինակներում, բրաուզերի համատեղելիության նախածանցները ոչ մի տեղ չեն օգտագործվում: Ես դա արեցի css-ի հեշտ ընթերցման համար: Հետևաբար, տես օրինակները վերջինում Chrome տարբերակներըկամ Firefox:
#1 Ուղղահայաց և հորիզոնական հավասարեցման պարզ օրինակ
Սկսենք հենց սկզբից պարզ օրինակ- հավասարեցում ուղղահայաց և հորիզոնական միևնույն ժամանակ և բլոկի ցանկացած բարձրության վրա, նույնիսկ ռետինե:
Կամ այսպես՝ առանց ներսի բլոկի.
#1.2 Տարանջատում (բացը) ճկուն բլոկի տարրերի միջև
Կոնտեյների տարրերը եզրերում տեղադրելու և այն տարրը կամայականորեն ընտրելու համար, որից հետո բաց կլինի, անհրաժեշտ է օգտագործել margin-left:auto կամ margin-right:auto հատկությունը:
#2 Արձագանքող մենյու flex-ում
Եկեք էջի վերևում մենյու կազմենք: Լայն էկրանի վրա այն պետք է լինի աջ կողմում: Միջին հաշվով, հարթեցրեք մեջտեղում: Իսկ փոքրի վրա յուրաքանչյուր տարր պետք է լինի նոր տողի վրա:
#3 Պատասխանատու 3 սյունակ
Այս օրինակը ցույց է տալիս, թե ինչպես կարելի է արագ և հարմարավետ դարձնել 3 սյունակ, որոնք նեղանալով կվերածվեն 2-ի, իսկ հետո՝ 1-ի։
Խնդրում ենք նկատի ունենալ, որ դա կարելի է անել առանց մեդիա կանոնների օգտագործման, ամեն ինչ ֆլեքսի վրա է:
Գնացեք jsfiddle.net և փոխեք «արդյունք» բաժնի լայնությունը
#4 Պատասխանող բլոկներ flex-ում
Ենթադրենք, մենք պետք է ցուցադրենք 3 բլոկ, մեկը մեծ և երկու փոքր: Միաժամանակ անհրաժեշտ է, որ բլոկները հարմարվեն փոքր էկրաններին։ Մենք անում ենք:
Գնացեք jsfiddle.net և փոխեք «արդյունք» բաժնի լայնությունը
#5 Պատկերասրահ ճկման և անցման մասին
Այս օրինակը ցույց է տալիս, թե որքան արագ կարող եք գեղեցիկ ակորդեոն պատրաստել ֆլեքսի վրա նկարներով: Ուշադրություն դարձրեք անցումային հատկությանը flex-ի համար:
#6 Flex to Flex (ընդամենը օրինակ)
Խնդիրը ճկուն բլոկ պատրաստելն է։ Այնպես, որ տեքստի սկիզբը յուրաքանչյուր բլոկում գտնվում է նույն տողի վրա՝ հորիզոնական: Նրանք. քանի որ լայնությունը նեղանում է, բլոկները աճում են բարձրության վրա: Ինձ պետք է, որ նկարը լինի վերևում, կոճակը միշտ ներքևում լինի, իսկ տեքստը մեջտեղում՝ մեկ հորիզոնական տողով սկսվի...
Այս խնդիրը լուծելու համար բլոկներն իրենք են ձգվում ֆլեքսով և դրանց համար սահմանվում է առավելագույն հնարավոր լայնությունը: Ամեն ներքին միավորնաև ճկուն կոնստրուկցիա է՝ առանցքի պտտվող ճկուն ուղղությունը՝ սյունակ; իսկ մեջտեղի տարրը (որտեղ տեքստն է) ձգվում է flex-grow:1; լրացնել ամբողջ ազատ տարածքը, այնպես որ արդյունքը ձեռք է բերվում - տեքստը սկսվեց մեկ տողով ...
Ավելի շատ օրինակներ
Բրաուզերի աջակցություն - 98.3%
Իհարկե, չկա լիարժեք աջակցություն, բայց բոլոր ժամանակակից բրաուզերներն աջակցում են flexbox կոնստրուկցիաներին: Ոմանք դեռ պահանջում են նախածանցներ: Իրական պատկերի համար եկեք նայենք caniuse.com-ին և տեսնենք, որ այսօր օգտագործվող բրաուզերների 96,3%-ը կաշխատի առանց նախածանցների՝ 98,3% նախածանցներով: Սա հիանալի ցուցանիշ է flexbox-ի համարձակ օգտագործման համար:
Իմանալու համար, թե որ նախածանցներն են արդիական այսօր (2019թ. հունիս), ես կտամ բոլոր ճկուն կանոնների օրինակ. անհրաժեշտ նախածանցներ:
/* Կոնտեյներ */ .flex ( ցուցադրում:-webkit-box; ցուցադրում:-ms-flexbox; ցուցադրում:flex; ցուցադրում:-webkit-inline-box; ցուցադրում:-ms-inline-flexbox; ցուցադրում:inline-flex; -webkit-box-orient:ուղղահայաց; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:column wrap; flex-flow:column wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content:space-between; -ms-flex-line-pack: բաշխել; align-content:space-around;) /* Նյութեր */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- բացասական՝ 2; ճկուն-կծկվել՝ 2; -ms-flex-նախընտրելի-չափ՝ 100px; flex-basis՝100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2;)
Ավելի լավ է, եթե նախածանցներով հատկությունները գերազանցեն սկզբնական հատկությունը:
Այսօրվա համար ավելորդ նախածանցներ չկան (ըստ caniuse-ի) այս ցանկում, բայց ընդհանուր առմամբ կան ավելի շատ նախածանցներ։
| Chrome | սաֆարի | Firefox | Օպերա | Ի.Է | Android | iOS |
|---|---|---|---|---|---|---|
| 20- (հին) | 3.1+ (հին) | 2-21 (հին) | 10 (Tweener) | 2.1+ (հին) | 3.2+ (հին) | |
| 21+ (նոր) | 6.1+ (նոր) | 22+ (նոր) | 12.1+ (նոր) | 11+ (նոր) | 4.4+ (նոր) | 7.1+ (նոր) |
- (նոր) - նոր շարահյուսություն՝ ցուցադրում՝ flex; .
- (tweener) - հին 2011 թ. ոչ պաշտոնական շարահյուսություն՝ ցուցադրում՝ flexbox; .
- (հին) - հին 2009 թ-ի շարահյուսություն՝ ցուցադրում՝ տուփ;
Տեսանյութ
Դե, մի մոռացեք տեսանյութի մասին, երբեմն այն նաև հետաքրքիր է և հասկանալի։ Ահա մի քանի հայտնի.
Օգտակար Flex հղումներ
flexboxfroggy.com - flexbox ուսուցման խաղ:
Flexplorer-ը տեսողական ճկուն կոդի կառուցող է:
Այս գրառման մեջ ես ուզում եմ ցույց տալ Flexbox-ի միջոցով արձագանքող հորիզոնական մենյու իրականացնելու մեկ եղանակ: Այս մեթոդըմենյուի իրականացումն օգտագործվում է Warface Hub կայքում, բայց մի փոքր այլ կառուցվածքով և օգտագործված Օավելի շատ սուլիչներ:
Մոտ մեկ տարի առաջ ես մտա մի ընկերություն, որտեղ ինձ ասացին մի հրաշալի արտահայտություն. «Նախ մենք ամեն ինչ անում ենք հետ օգտագործելով CSS, այնուհետև պարզապես ավելացրեք JavaScript-ը։" Խորհուրդը կարծես թե լավն է, և ես հետևեցի դրան: Բայց ինչպես պատահում է, ես տարվեցի։ Հիմա ինձ վերադարձավ, որ ամեն ինչ չէ, որ պետք է անել այս մոտեցմամբ։
Եվ այսպես, ավելին: Սկսեցի ուսումնասիրել և իրականացնել։
Նպատակներ
- ձեռք բերել Flexbox հատկությունների հետ աշխատելու հիմնական հմտություններ;
- զարգացնել հորիզոնական հարմարվողական մենյու;
- արդյունքում լուծումը նախագծում կիրառելու համար:
Գործիքներ և փաստաթղթեր
- NPM - որպես փաթեթի կառավարիչ (այժմ ակտիվորեն տեղափոխվում է Yarn)
- Grunt-ը գործիք է, որը կօգնի ձեզ կառուցել ձեր նախագիծը:
- Flexbox փաստաթղթերը (տես օգտակար հղումներ);
Կառուցվածք
Ճաշացանկի ոճային կառուցվածքը կազմակերպելու համար ես օգտագործեցի նկարագրված հասկացությունը: Այս հայեցակարգի հեղինակն առաջարկում է ոճի բոլոր նկարագրությունները բաժանել մի քանի մասի.
- դասավորությունը– նկարագրում է բաղադրիչների և տարրերի դիրքը էջում.
- բաղադրիչ- նկարագրում է բաղադրիչի մեջ ներառված տարրերի ցուցադրումն ու վարքը.
- տարր- նկարագրում է մեկ տարրի ցուցադրումն ու վարքը.
- Հիմք- հաստատունների, հիմնական ոճերի նկարագրությունը (ինչպես normalize.css-ում)
- Բաղադրիչ- կիրառական բաղադրիչների նկարագրությունը. Մեր դեպքում «Մենյու» բաղադրիչը
- տարր- ոճերի նկարագրություն այնպիսի տարրերի համար, ինչպիսիք են կոճակը, հղումը և այլն:
- դասավորությունը- էջում բլոկների գտնվելու վայրի նկարագրությունը
- ոճ.scss- այս ֆայլում մենք կհավաքենք ամեն ինչ միասին
CSS և HTML մուտքագրման և պիտակի պիտակներ
Նախքան HTML նշումը նկարելը, ես կցանկանայի հիշեցնել/ցուցադրել CSS ընտրիչի մի քանի հետաքրքիր վարքագիծ, որոնք օգտակար կլինեն:
IN այս օրինակըԴուք կարող եք նկատել, որ երբ սեղմում եք պիտակի վրա, դուք կստանաք ընտրված մուտքագրումը: Սրա մեջ առանձնահատուկ բան չկա (տես), բայց ամենահետաքրքիրը գալիս է CSS ընտրիչների կողմից։
Մուտք՝ ստուգված (սահմանի գույնը՝ կարմիր; )
Այս CSS ընտրիչը կմշակվի միայն այն ժամանակ, երբ ընտրված է մուտքագրումը (տես՝ ստուգված է)
Երկրորդ բանը, որին պետք է ուշադրություն դարձնել CSS սելեկտորներում, հաջորդ տարրի ընտրությունն է (տես Հարակից եղբայրների ընտրիչներ և Ընդհանուր եղբայրների ընտրիչներ): Այսինքն՝ մենք կարող ենք ընտրել հաջորդ տարրը ընթացիկից հետո։
Մուտքագրում՝ ստուգված + .պիտակ (գույնը՝ կարմիր; )
Այս օրինակում մենք ստացել ենք հետևյալ վարքագիծը. երբ ընտրվում է մուտքագրման դաս ունեցող տարրը, պիտակի դասի հաջորդ տարրը կփոխվի նկարագրված ոճերին համապատասխան։
Հիմա այդ ամենը հավաքված է:
Ցանկի կառուցվածքը մեկ տարրով
Այս օրինակում ես ավելացրել եմ որոշ մուտքային և պիտակի տարրեր՝ հետևյալ վարքագծին հասնելու համար.
- Յուրաքանչյուր name=menu-item-trigger տարր, բացառությամբ առաջինի, :checked վիճակում կփոխի հետագա label.menu-item-close և div.menu-sub տարրերի տեսանելիությունը և դիրքը, որպեսզի label.menu-item-ը -close տարրը ամբողջությամբ ծածկված է label.menu-item-label տարրով, իսկ div.menu-sub-ը ներկայացվել է label.menu-item-label տարրի տակ: Այսինքն, մենք բացում ենք ենթամենյու և փոխում ենք վարքը հիմնական ցանկի վրա սեղմելիս.
- Առաջին տարրի name=menu-item-trigger-ը կօգտագործվի միայն նախորդ պարբերության բոլոր կիրառված փոփոխությունները չեղարկելու համար, այսինքն՝ փակել ենթացանկը;
Ընտրված ընտրացանկի մեկ տարր.
Նման մանիպուլյացիաներից հետո մնում է միայն թաքցնել մուտքային տարրերը:
Flexbox
Այժմ մենք պետք է ոճեր ավելացնենք այս մենյուլավ ցուցադրվում է տարբեր լուծաչափերով և տարբեր բրաուզերներ. Այս պահին մենք մեր ջանքերը կենտրոնացրել ենք այն բրաուզերներին աջակցելու վրա, որոնք ամենաշատն են օգտագործվում մեր ռեսուրսի այցելուների կողմից: Արդյունքը փոքր ցուցակ է՝ Chrome, Firefox, IE Edge, IE 11 և դրանց բջջային տարբերակները վերջին տարբերակները.Աջակցությունը տրամադրվում է՝ ավելացնելով նախածանցներ (postcss) և առանձին բրաուզերի համար գրելու ոճեր:
Flexbox-ում արձագանքողությունը շատ հեշտ է ձեռք բերել: Բավական է նկարագրել տարան, բայց երբեմն անհրաժեշտ կլինի լուծել ներսում պարունակության հետ կապված խնդիրներ։ Օրինակ:
- ցանկի տարրեր երկար բառերով, ինչպիսիք են «գիտելիքների բազան» և դրա գերմաներեն թարգմանությունը «Wissensdatenbank»: Այս դեպքում տեքստի համար ավելացվում է փաթաթող տարր, որի վրա կիրառվում են հետևյալ ոճերը.
Label-text (// @link: http://htmlbook.ru/css/text-overflow overflow: թաքնված; text-overflow՝ էլիպսիս; լայնությունը՝ 100%, ցուցադրում՝ inline-block; )
- Նկարներ, որոնք պետք է ձգվեն լայնությամբ, բայց լայնությունը սահմանելիս՝ 100%; նրանք դուրս են սողում մայր բլոկի միջից: Ահա տուփի չափսերը. սահմանային տուփ; այս տարրի համար;
- Կարող են լինել նաև խնդիրներ, երբ մանկական տարրերը չեն զբաղեցնում ողջ հնարավոր երկարությունը կամ հավասարաչափ բաշխված չեն: Ահա թե որտեղ է ճկունությունը. 1 1 ավտոմատը կարող է օգնել:
Մենյու (ցուցադրում՝ ճկուն, հավասարեցված տարրեր՝ կենտրոն, ճկուն փաթաթում: փաթաթում; )
Կոնտեյների յուրաքանչյուր տարրի համար դուք պետք է այն ձևավորեք այնպես, որ այն լրացնի բոլոր հնարավոր տարածքը և իր ներսում պարունակությունը ուղղահայաց ուղղահայաց:
Ցանկի տարր ( ճկուն՝ 1 1 ավտոմատ, ցուցադրում՝ ճկունություն, ճկուն ուղղություն՝ սյունակ, հավասարեցված տարրեր՝ ձգվող; ) 
Ավելի գեղեցիկ մենյուի ցուցադրում կարելի է ձեռք բերել
Այս թողարկումում մենք կանենք հորիզոնական մենյուի էֆեկտսավառնելիս: Եկեք կապվենք տառատեսակների պատկերակներով, միացնենք շերտերի խառնման ռեժիմը mix-blend-mode-ով. բազմապատկել, օգտագործել :hover կեղծ դասեր և ծանոթանալ desplay:flax-ին, ամեն ինչ արված է մաքուր CSS3-ով:
Մենյու շրջանակ HTML-ում
Ներբեռնեք արխիվը ձեր համակարգչում և բացեք այն: Այն պարունակում է երեք թղթապանակ, css, որտեղ գտնվում են ոճի ֆայլերը, fonts-ը պատկերակներով թղթապանակ է, դրա մեջ img-ը ֆոնային պատկեր է:
Ամեն ինչ փոխանցեք ձեր զարգացման միջավայրին, որտեղ դուք աշխատում եք: Ես կգրեմ ամբողջ կոդը phpstorm-ում: Ես պատճենում եմ բոլոր թղթապանակները և ֆայլերը դրա մեջ, բացում եմ index.html և անցնում մենյուի շրջանակի նկարագրությանը:
Գրեք մարմնի պիտակ
Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-
Սրբապատկերի անունը.
- գնումների զամբյուղ
- սերվեր
- թղթապանակը բաց է
- թերթ-ո
CSS ոճավորում
Նշանավորումն ավարտելուց հետո մենք կանցնենք ոճավորմանը: Բացեք style.css-ը body-ում և սահմանեք ֆոնն ու Verdana տառատեսակը:
Body (ֆոն-պատկեր՝ url("../img/escheresque_ste.png"); տառատեսակ-ընտանիք՝ Verdana; )
Մենք ընտրացանկով նախադրում ենք բլոկի նախապատմությունը, վերևից 100 գագաթների հետքեր ենք անում: և ամբողջ էկրանի լայնությունը:
Dws-մենյու (ֆոնի գույնը՝ սպիտակ; լուսանցք՝ 100px; լայնությունը՝ 100%; )
Ul բլոկներում մենք ցուցակները հորիզոնական գծում ենք desplay:flax-ով, հեռացնում ենք լցոնումը և կենտրոնացնում մեր տարրերը justify-content:center-ով:
Ul.dws-ul (ցուցադրում՝ ճկունություն; լիցքավորում՝ 0; հիմնավորում-բովանդակություն՝ կենտրոն; )
Մենք հեռացնում ենք նշիչը LI ցուցակներից և բոլոր կողմերից նահանջում ենք 10 բահով:
Li.dws-li (ցուցակի ոճը՝ ոչ մեկը; լիցք՝ 10px; )
Հղումներից հանում ենք ընդգծումը, տեքստը հասցնում 18 պիկի։ և դարձրեք այն սև:
Li.dws-li a (տեքստի ձևավորում՝ ոչ մեկը; տառատեսակի չափը՝ 18px; գույնը՝ #000; )
Տեղափոխեք պատկերակը մի փոքր դեպի աջ՝ լուսանցքով աջ:10px:
Li.dws-li a i (լուսանցք-աջ՝ 10px;)
Անիմացիա սավառնելիս
Հիմնական դիզայնը կատարելուց հետո եկեք սկսենք անիմացիա անել սավառնելիս:
Եկեք ստեղծենք լրացուցիչ կեղծ տարրեր, որոնք սավառնելիս կնշեն տարրի անունը։
Եկեք նկարագրենք ձախ կողմը, ընտրենք հղումները և նրանց վերագրենք կեղծ տարր li.dws-li a::before , գրենք դատարկ բովանդակություն:''; , 20 նկար լայն. և 3 բահի բարձրություն: բավական. Սահմանենք գույնը և որպեսզի բլոկը հայտնվի, նշանակենք հղումների դիրքը՝ հարաբերական; և տեղադրեք այն բացարձակապես դեպի հղումները, տեղափոխեք այն հենց ներքև, սեղմեք այն ձախ եզրին:
li.dws-li a( ... դիրք՝ հարաբերական; ) li.dws-li a::նախկինում ( ... դիրք՝ բացարձակ; վերև՝ 100%; ձախ՝ 0; )
Կրկնօրինակեք այս բլոկը և դրան վերագրեք ::after կեղծ տարրը: Փոխեք պարամետրը ձախից աջ, ընտրեք մեկ այլ գույն #ff2117:
Li.dws-li a::after(բովանդակությունը՝ ""; լայնությունը՝ 20px; բարձրությունը՝ 3px; ֆոնի գույնը՝ #ff2117; դիրքը՝ բացարձակ; վերև՝ 100%, աջը՝ 0; )
Այնուհետև մենք պատրաստում ենք անիմացիան հովերի վրա: Ընտրեք li-ն և տվեք նրանց մի փոքր ավելի մուգ ֆոն:
Li.dws-li:hover (ֆոնի գույնը՝ #e5eae8; )
Դա անելու համար մենք ընտրում ենք սավառնող ցուցակները և դրանցում ավելացնում ենք 50% լայնությամբ կեղծ տարր և սահմանում ենք փոխակերպումը X առանցքի երկայնքով ձախից աջ: Սա նրան շարժում կտա:
Li.dws-li:hover a:before(լայնությունը՝ 50%, փոխակերպում՝ translateX(100%);
Նույնը կրկնում ենք :: pseudo-տարրից հետո, միայն հիմա աջից ձախ շարժումը դնում ենք։
Li.dws-li:hover a:after(լայնությունը՝ 50%; փոխակերպում՝ translateX(-100%);
li.dws-li a::before( ... անցում: .5s; mix-blend-mode: բազմապատկել; ) li.dws-li a::after( ... անցում: բազմապատկել;)
Բավականին լավ ստացվեց, հիմա լայնությունը դնենք զրոյի և հղումը սավառնելիս կարմիր գույն ավելացնենք։
Li.dws-li a:hover (գույնը՝ #e62117; )
li.dws-li a( ... padding: 5px; ) li.dws-li a::before( ... վերև: 90%; ) li.dws-li a::after( ... վերև: 90 %;)
Սկզբունքորեն ցույց տվեցի այն, ինչ ուզում էի, բավականին գեղեցիկ ճաշացանկ ստացվեց։
Դասը պատրաստեց Գորելով Դենիսը։
Այս հոդվածում մենք ցանկանում ենք ավելի սերտորեն նայել Flexbox-ի օգտագործմանը CSS3-ում՝ որպես վեբ կայքում արձագանքելու առաջադեմ ուղիներից մեկը:
ժամը ստեղծելով CSSդասավորությունների բարդությունն այն չէր, ինչ կա այսօր: Նախկինում դասավորությունները ֆիքսված էին լայնությամբ և բլոկի տեղադրման փոքր տատանումներով, բայց այսօր կայքի դասավորությունները կարող են գրեթե ցանկացած ձև ստանալ: Այս ամենը ստիպում է մշակողներին հանդես գալ CSS հաքերով, որպեսզի բովանդակությունը քիչ թե շատ ճիշտ ցուցադրվի։
Flexbox (ճկուն տուփեր) հարաբերական է նոր ռեժիմնշագրում CSS3-ում, որը նախատեսված է կոնտեյների մեջ տարրերի դասավորվածությունը, ուղղությունը և կարգը բարելավելու համար, նույնիսկ եթե այն դինամիկ է կամ անհայտ չափերի: Սա ամենաշատն է կարևոր հատկանիշ- բլոկում մանկական տարրերի լայնությունը կամ բարձրությունը փոխելու հնարավորություն՝ տարբեր էկրանի չափսերով հասանելի տարածքը լավագույնս լրացնելու համար:
Ի՞նչ է Flexbox-ը:
Flexbox-ը դասավորության ռեժիմ է, որը նախատեսված է էջի վրա տարրերը դասավորելու համար, որպեսզի դրանք կանխատեսելի կերպով վարվեն, երբ էջը արձագանքում է էկրանի տարբեր չափերի և սարքերի:
Օգտագործելով flexbox, բեռնարկղը և նրա երեխաները կարող են տեղակայվել ցանկացած ուղղությամբ՝ ձախ, աջ և նույնիսկ վեր կամ վար: Դուք կարող եք ընտրել էջի տարրերի ցանկալի հերթականությունը և դասավորել դրանք, հիմնավորել բովանդակությունը աջից ձախ մեկ հատկանիշով և նույնիսկ ցանկացած քանակությամբ սյունակներ ավելացնել ձեր կայքի էջի դասավորությանը: Բլոկների չափերը նույնպես ճկուն են, քանի որ տարրերը կարող են աճել՝ զբաղեցնելով չօգտագործված տարածքը կամ փոքրանալ՝ արտահոսքը կանխելու համար:
Վրա այս պահին flexboxաջակցվում է գրեթե բոլոր ժամանակակից բրաուզերների կողմից, ներառյալ Android-ը և iOS-ը:
Երբ օգտագործել Flexbox-ը դասավորության համար
Նախորդ հոդվածներից մեկում մենք գրել ենք որպես ռեսպոնսիվ դիզայնի մեթոդ: Թեև տեխնիկապես հնարավոր է կայքի համար ամբողջական դասավորություն ստեղծել Flexbox-ով, այն նախատեսված չէ միայն այդ նպատակով: Ավելի շուտ, այն ավելի հարմար է առանձին տարաներ ձևավորելու համար, ինչպիսիք են հիմնական պարունակության տարան, կողային վահանակ(կողային գոտի), վերնագիր և նմանատիպ այլ բաժիններ: Այնուամենայնիվ, ցանցերն ավելի լավն են ամբողջ դասավորությունը ստեղծելու համար:
Տարբերությունը կայանում է նրանում, թե ինչպես flexboxփոխազդում է բրաուզերների հետ, որոնք աստիճանաբար բեռնում են էջը: Նախ, բովանդակությունը ձգվում է հորիզոնական՝ ամբողջ էկրանը լրացնելու համար: Երբ մյուս բոլոր բեռնարկղերը բեռնվում են, հորիզոնական էկրանը դինամիկ կերպով հարմարվում և փոքրանում է՝ լրացնելով էկրանի ողջ լայնությունը՝ ներառելով շրջակա տարրերը:
Այլ կերպ ասած, վայրկյանի մի մասի համար օգտագործողը կտեսնի բոլորովին այլ դասավորություն, որը նախատեսված էր: Բայց էջն ամբողջությամբ բեռնվելուց հետո ամեն ինչ, իհարկե, հարթվում է:
Կոնտեյներներ, երեխաներ և ֆլեքս
Նախքան Flexbox-ի միջոցով CSS կոդը գրելը, կան մի քանի կարևոր հասկացություններ, որոնց նախ պետք է ծանոթանալ.
- flexbox - բեռնարկղը դառնում է flexboxայն բանից հետո, երբ ցուցադրման հատկությունը միացված է flex կամ inline-flex արժեքին
- flex տարր - երեխայի տարրը flexbox-ում
- հիմնական առանցք - սա այն հիմնական առանցքն է, որի երկայնքով տարրերը դասավորված են
- խաչաձև առանցք - հիմնական առանցքին ուղղահայաց առանցք: Նաեւ կոչվում է խաչաձեւ առանցք
- հիմնական սկիզբ/հիմնական վերջ (հիմնական սկիզբ/հիմնական վերջ) - ճկուն տարրերը տեղադրվում են տարայի մեջ, որը սկսվում է հիմնական սկզբի կողքից և ավարտվում դեպի հիմնական վերջը
- խաչաձև սկիզբ և վերջ (խաչ սկիզբ/վերջ) – ճկուն գծերը լցված են իրերով (տարրերով) և տեղադրվում են տարայի մեջ, որը սկսվում է ճկուն կոնտեյների խաչաձև սկզբի կողքից և գնում մինչև խաչաձև վերջ։
- հիմնական չափի հատկություն - ճկուն տարրի լայնությունը կամ բարձրությունը, կախված նրանից, թե որն է հիմնական առանցքի հիմնական հարթության մեջ, տարրի հիմնական չափն է: Flex տարրի հիմնական չափի հատկությունը լայնության կամ բարձրության հատկությունն է, որն էլ որ լինի հիմնական հարթության մեջ
- խաչի չափի հատկություն - ճկուն նյութի լայնությունը կամ բարձրությունը, որն էլ որ լինի խաչի առանցքի չափում, ապրանքի խաչի չափն է: Խաչի չափման հատկությունը կախված է լայնությունից կամ բարձրությունից, որը գտնվում է խաչի հարթության մեջ
CSS-ում կան որոշակի հատկություններ, որոնց վրա չի ազդում flexbox հատկությունը, քանի որ դրանք իրականում չեն ստեղծում կոնտեյներների տուփեր.
Column-* float հստակ ուղղահայաց-հավասարեցրեք::first-line and::first-letter
HTML5 կոնտեյների ստեղծում
Այժմ մենք կարող ենք սկսել դասավորությունը կառուցել՝ օգտագործելով flexbox: Դա անելու համար ստեղծեք html էջի հիմքը (կամ php-ով, եթե օգտագործում եք CMS):
Ստեղծեք հիմնական կոնտեյների div մարմնի ներսում.
Այս տարայի ներսում կարող եք ցանկացած բովանդակություն ավելացնել:
Որպես թեստ՝ ես կստեղծեմ երեք բլոկ՝ որոշ տեղեկություններով, և բլոկ՝ հիմնական բովանդակությամբ դրանց տակ:
Այժմ, այս ողնաշարին որոշակի գույն տալու համար, եկեք ավելացնենք մի քանի հիմնական CSS ոճ (կարող եք դա անել առանձին փլագինով): css ֆայլոճերը կամ ներառեք այս ոճերը պիտակի մեջգլխի հատվածում):
Flexbox-ի ստեղծում և ձևավորում
Ստեղծել flexbox, մենք պետք է սահմանենք ցուցադրման հատկությունը ցանկալի կոնտեյներ. Մեր օրինակում սա մայր տարրի հատկությունն է.
Բովանդակություն (ցուցադրում՝ flex; )
Այս քայլը կստեղծի flexbox բլոկի մակարդակում: Որպես այլընտրանք (եթե ցանկանում եք կիրառել ներկառուցված ոճեր), դուք կարող եք օգտագործել inline-flex-ի փոխարեն flex-ը:
Այժմ եկեք ավելացնենք CSS ոճավորում՝ փորձարկելու մեր նորաստեղծ flexbox-ը:
Ոճեր՝ արձագանքելու համար
Կան բազմաթիվ հատկություններ, որոնք մենք կարող ենք միացնել flexbox-ում՝ արձագանքող դասավորություն ստեղծելու համար:
Flex տարրերը ճիշտ հերթականությամբ տեղադրելու համար պարզապես ավելացրեք պատվերի հատկությունը և սղագրությունը flex հատկության համար:
Բլոկ (պատվեր՝ 1; ճկունություն՝ 1 1 30%; ) հոդված (պատվեր՝ 2; ֆլեքս՝ 1 1 ավտոմատ; )
Սկզբում այս ամենը կարող է մի փոքր դժվար թվալ, բայց պրակտիկան ամեն ինչ իր տեղը կդնի։
Պատվերի հատկությունը փոխանցվում է մի համար, որպեսզի զննարկիչին ասվի, թե որ ճկուն տարրը ցուցադրի մյուսներից առաջ: Թիվ 1 պատվերի համար առաջինը կցուցադրվի flex տարրը: 2-ի համար` երկրորդը, 3-ի համար` երրորդը և այլն:
Կարող եք նաև օգտագործել բացասական թվեր: Եթե դասավորության ժամանակ հանկարծ հասկանաք, որ անհրաժեշտ է ավելացնել ճկուն տարր նախքան արդեն տեղադրված առաջինը, կարող եք նոր flex տարրի պատվերի հատկությունը սահմանել -1; .
Flex սղագրությունը բաղկացած է երեք հատկությունից.
- flex-grow - որոշում է, թե որքան ազատ տարածություն կարող է վերցնել բեռնարկղը այլ տարաների համեմատ: Դա կարող է լինել միայն դրական թիվ
- flex-shrink-ը հատկություն է, որը սահմանում է ճկուն տարրի նեղացման գործակիցը: Flex տարրերը կլցնեն բեռնարկղը flex-shrink արժեքով, երբ ֆլեքս տարրերի լռելյայն լայնությունն ավելի լայն է, քան ճկուն կոնտեյները: Բացասական թվերը ազդեցություն չունեն
- flex-basis - ճկուն առարկայի սկզբնական չափը նախքան ճկուն չափսերի կիրառումը և մինչև ազատ տարածություն զբաղեցվի կամ բավարար տարածք չլինի: Կարող է նշվել պիքսելներով կամ տոկոսներով
Որոշ բացատրություններ կարճ մուտքհատկություններ:
- flex՝ սկզբնական կամ ճկուն՝ 0 1 auto – այս պարամետրը դարձնում է ճկուն տարրի չափը դրա ներսում գտնվող բովանդակության հետ: Այն մեծանում է, եթե բովանդակությունը շատ է, և փոքրանում է, եթե բովանդակությունը շատ չէ:
- flex. auto կամ flex. 1 1 auto - այս տարբերակներից որևէ մեկը թույլ է տալիս ճկուն տարրը փոքրանալ և աճել, որքան անհրաժեշտ է, որպեսզի համապատասխանի էկրանի ցանկացած չափի:
- ճկուն՝ ոչ մեկը կամ ճկուն՝ 0 0 ավտոմատ – սա անջատում է չափի ճկունությունը և սահմանում է, որ ճկուն տարրի չափը ֆիքսվի և չկարգավորվի օգտագործողի համար էկրանի ցանկացած չափի համար:
- Flex-ի հարաբերական չափը ճկույթով` 1% px: Դրական թիվը նախ սահմանում է ճկուն տարրի զբաղեցրած ազատ տարածության չափը այլ ճկուն տարրերի համեմատ: Երկրորդ թիվը թույլ է տալիս նվազեցնել տարրի չափը փոքր էկրանների վրա: Երրորդ արժեքը պիքսելներով (կամ տոկոսով) սահմանում է ճկուն տարրի սկզբնական չափը, բայց տեղյակ եղեք, որ այս արժեքը նաև անջատում է flex-basis հատկությունը, ինչը նշանակում է, որ այս սկզբնական չափը երաշխավորված չէ: Եթե բավականաչափ տարածք կա այս սկզբնական չափը ցուցադրելու համար, ապա այն ցուցադրվում է, իսկ եթե բավարար տարածք չկա, ապա այն չի ցուցադրվում: Սա հատկապես ճիշտ է, եթե տարրի ցուցադրման կարգն ավելի ցածր է ցուցակում, իսկ մյուս նախորդ տարրերը, որոնք ավելի բարձր են, զբաղեցնում են տարածքի մեծ մասը: Այս պարամետրի օրինակ կարող է լինել ճկունությունը՝ 2 1 0% :
Որպեսզի այս տարբերակներից որևէ մեկը աշխատի, նախ պետք է սահմանեք flexbox-ի չափը բարձրությամբ և լայնությամբ:
Ելնելով վերը նշված CSS ոճի օրինակից, ահա թե ինչպիսի տեսք կարող են ունենալ դրանք. css ոճերըավելացված չափերով flexbox-ի համար.
Բովանդակություն (ցուցադրում՝ ճկուն, լայնություն՝ 75%, բարձրություն՝ 450px; )
Այս ոճերի դեպքում օրինակի բոլոր ճկուն տարրերը ցուցադրվում են նույն տողում: Քանի որ ես ուզում եմ ցուցադրել flex տարրերը մեկ տողում, իսկ հիմնական բովանդակությունը դրանցից ներքև, ես պետք է ավելացնեմ flex-flow հատկությունը և սահմանեմ դրա արժեքը՝ բովանդակությունը տողերով փաթաթելու համար:
Այս կարգավորումն անելու համար ես պետք է ավելացնեմ այս հատկությունը flexbox կոնտեյների մեջ.
Բովանդակություն (ցուցադրում՝ ճկուն, ճկուն հոսք՝ տողերի փաթաթում; /* ճկուն տարրերը լրացնում են տող (տող) */ լայնություն՝ 75%, բարձրություն՝ 450 px; )
Երբ մեկ կամ մի քանի ճկուն տարրեր զբաղեցնում են flexbox-ի ամբողջ երկարությունը, դրանցից հետո մնացած ֆլեքս տարրերը տեղափոխվում են նոր տող:
Այժմ, որպեսզի քիչ թե շատ հասկանանք, թե որտեղ է բլոկը և ինչ չափսեր ունի, ավելացնենք մի քանի լրացուցիչ ոճ։ Նաև մենք փակեցինք տեքստի ամբողջ բովանդակությունը p պիտակի մեջ և որոշ ոճեր ավելացրինք այս պիտակին.
Թիվ 1 տեղեկատվական բլոկ
Տեղեկատվական բլոկ թիվ 2
Թիվ 3 տեղեկատվական բլոկ
Ահա հիմնական բովանդակությունը.
CSS ոճեր.
Բովանդակություն (ցուցադրում՝ ճկուն; ճկուն հոսք՝ տողերի փաթաթում; /* ճկուն տարրերը լրացնում են տողը (տող) */ լայնությունը՝ 75%, բարձրությունը՝ 450 պիքսել; լուսանցք՝ ավտոմատ; ֆոնի գույնը՝ #333; .blok ( պատվեր 1; ճկունություն՝ 1 1 30%; ֆոնի գույն՝ #ccc; լուսանցք՝ 5px; ) հոդված (պատվեր՝ 2; ճկում՝ 1 1 ավտոմատ; ֆոնի գույն՝ #bbb; եզրագիծ՝ 5px կոշտ #333; լիցք՝ 7px;) p (գույն՝ #fff; լիցք՝ 15px; տառաչափ՝ 22px; )
Եվ մի մոռացեք, որ եթե որոշեք min-width հատկություն ավելացնել flexbox-ին կամ flex տարրերին, դա կարող է հանգեցնել flexbox-ի ճիշտ չաշխատմանը: Բացի այդ, դիզայնի արձագանքման համար ավելի լավ է օգտագործել հիմնական կոնտեյների լայնությունը՝ օգտագործելով տոկոսները: Եթե դուք կոշտ պիքսելների արժեքներ եք սահմանում, փոքր էկրանների համար արձագանքման հնարավորությունը չի աշխատի:
Ստորև ներկայացնում ենք վերջնական արդյունքի ցուցադրությունը.
Փորձեք խաղալ տարբեր ոճերի հետ՝ ավելի լավ հասկանալու համար, թե ինչպես է աշխատում flexbox-ը գործնականում:
