Ինչպես է աշխատում Flexbox-ի գեներատորը
CSS Flexbox-ի գեներատորը տեսողական գործիք է, որը թույլ է տալիս իրական ժամանակում նախագծել և կառուցել flex կոնտեյներներ ու դրանց ներսում գտնվող տարրերը: Օգտագործողը կառավարման վահանակի միջոցով սահմանում է դասավորության հատկությունները, անմիջապես տեսնում է արդյունքը էկրանին և կարող է պատճենել ստացված CSS կոդը սեփական նախագծերում օգտագործելու համար:
Այս գործիքը նախատեսված է բոլոր նրանց համար, ովքեր ցանկանում են տեսողականորեն ձևավորել CSS flexbox դասավորություն, արագ ստանալ անհրաժեշտ CSS կոդը կոնտեյների ու տարրերի համար կամ ավելի լավ հասկանալ տարբեր հատկությունների ազդեցությունը դասավորության վրա: Գործիքի օգնությամբ հեշտությամբ ստեղծվում են տարածված կառուցվածքներ, ինչպիսիք են կենտրոնացված տարրերը, նավիգացիոն վահանակները, տարրերի ստեկերը, քարտերը կամ կողային վահանակները:
Ձեր դասավորությունը կառուցվում է անմիջապես Ձեր բրաուզերում: Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo, ինչը ապահովում է տվյալների տեղային մշակումը հենց օգտագործողի սարքի վրա:
Կոնտեյների հատկությունների կարգավորում
Flexbox դասավորության հիմքը կոնտեյներն է, որի հատկությունները որոշում են ներքին տարրերի տեղաբաշխման ընդհանուր կանոնները: Գործիքի «Կոնտեյներ» բաժնում հասանելի են հետևյալ պարամետրերը՝
- Ուղղություն (Direction)՝ Սահմանում է հիմնական առանցքի ուղղությունը: Հնարավոր արժեքներն են՝ Row, Row reverse, Column և Column reverse:
- Wrap՝ Որոշում է, թե ինչպես պետք է վարվել, երբ տարրերը չեն տեղավորվում մեկ տողում: Ընտրանքներն են՝ No wrap, Wrap և Wrap reverse:
- Justify content՝ Հավասարեցնում է տարրերը հիմնական առանցքի երկայնքով: Հասանելի արժեքներն են՝ Start, End, Center, Space between, Space around և Space evenly:
- Align items՝ Որոշում է տարրերի հավասարեցումը լրացուցիչ առանցքի երկայնքով: Արժեքներն են՝ Start, End, Center, Stretch և Baseline:
- Align content՝ Կարգավորում է բազմատող կոնտեյների տողերի միջև եղած տարածությունը: Կիրառելի արժեքներն են՝ Start, End, Center, Stretch, Space between, Space around և Space evenly:
- Gap՝ Թվային արժեք, որը սահմանում է տարրերի և տողերի միջև հեռավորությունը։
Տարրերի անհատական հատկությունները
Կոնտեյների ներսում գտնվող յուրաքանչյուր տարր կարող է ունենալ իր սեփական վարքագիծը: Գործիքի «Տարրեր» բաժնում «Ավելացնել տարր» կոճակը սեղմելիս հայտնվում է նոր տարր (օրինակ՝ «Item 5»): Յուրաքանչյուր տարրի համար կարելի է սահմանել հետևյալ թվային և տեքստային արժեքները՝
- Order՝ Փոխում է տարրի տեսողական հերթականությունը դասավորության մեջ:
- Grow՝ Սահմանում է տարրի մեծանալու գործակիցը ազատ տարածությունը լրացնելու համար:
- Shrink՝ Որոշում է տարրի սեղմվելու գործակիցը, երբ տարածությունը չի հերիքում:
- Basis՝ Տարրի սկզբնական չափն է նախքան ազատ տարածության բաշխումը (ընդունում է թվային արժեք կամ «Auto»):
- Align self՝ Թույլ է տալիս տվյալ տարրի համար վերասահմանել կոնտեյների կողմից տրված հավասարեցումը: Արժեքներն են՝ Auto, Start, End, Center, Stretch և Baseline:
CSS կոդի գեներացման ժամանակ գործում է այն կանոնը, որ միայն իրենց հատկությունները փոխած տարրերի համար կստեղծվեն առանձին CSS կանոններ:
Առանցքների փոխազդեցությունը և տողադարձը
Flexbox-ի աշխատանքի հիմնական սկզբունքը հիմնական (main axis) և լրացուցիչ (cross axis) առանցքների փոխհարաբերությունն է: Երբ ուղղությունը փոխվում է row-ից column, հիմնական և լրացուցիչ առանցքները փոխվում են տեղերով: Սա անմիջապես ազդում է այն բանի վրա, թե ինչպես են գործում justify-content և align-items հատկությունները: Row-ի դեպքում justify-content-ը պատասխանատու է հորիզոնական հավասարեցման համար, իսկ Column-ի դեպքում այն սկսում է կառավարել ուղղահայաց դասավորությունը:
Տողադարձի (wrap) հատկությունը նույնպես առանցքային դեր ունի: Երբ ընտրված է No wrap տարբերակը, բոլոր տարրերը ստիպողաբար տեղավորվում են մեկ գծի վրա՝ անհրաժեշտության դեպքում սեղմվելով: Երբ միացվում է Wrap տարբերակը, այն տարրերը, որոնք չեն տեղավորվում ընթացիկ տողում, տեղափոխվում են հաջորդ տող: Այս պարագայում ակտիվանում է align-content հատկությունը, որը կառավարում է ստացված տողերի խմբային բաշխումը լրացուցիչ առանցքի երկայնքով: Gap հատկությունը միաժամանակ սահմանում է ինչպես տարրերի միջև եղած հեռավորությունը, այնպես էլ տողերի միջև եղած տարածությունը:
Կոդի ստացումը և պատճենումը
Գեներատորի աջ կամ ներքևի հատվածում գտնվում է «CSS» բաժինը, որտեղ իրական ժամանակում թարմացվում է համապատասխան CSS կոդը: Օգտագործողը կարող է տեսնել կոնտեյների համար գեներացված հատկությունները և փոփոխված տարրերի անհատական ոճերը:
Կոդը նախագծում տեղադրելու համար անհրաժեշտ է սեղմել «Պատճենել CSS-ը» կոճակը: Կտտոցից հետո կոճակի տեքստը փոխվում է «Copied» վիճակի՝ հաստատելով, որ կոդը հաջողությամբ պատճենվել է սարքի բուֆերում (clipboard):
Հաճախ տրվող հարցեր (FAQ)
Ո՞րն է տարբերությունը justify-content-ի և align-items-ի միջև:
Justify-content-ը բաշխում է տարրերը հիմնական առանցքի երկայնքով (տողի կամ սյան ուղղությամբ), մինչդեռ align-items-ը դիրքավորում է դրանք լրացուցիչ առանցքի երկայնքով: Փոխե՛ք ուղղությունը row-ից column, և երկու առանցքները կփոխվեն տեղերով. justify-content-ը կսկսի աշխատել վերևից ներքև, իսկ align-items-ը՝ ձախից աջ:
Ինչպե՞ս են աշխատում առանձին տարրերի կարգավորումները:
Ընտրե՛ք տարրն ըստ իր համարի, ապա սահմանե՛ք, թե որքանով է այն մեծանում ազատ տարածությունը լրացնելու համար (grow), որքանով է սեղմվում (shrink), դրա սկզբնական չափը (basis) և սեփական հավասարեցումը լրացուցիչ առանցքով (align-self): Order-ը տեղափոխում է տարրը էկրանին ավելի շուտ կամ ուշ՝ առանց HTML-ին դիպչելու: Միայն Ձեր փոփոխած տարրերը կստանան իրենց սեփական կանոնը CSS-ում:
Ե՞րբ են կարևոր wrap-ը և align-content-ը:
Երբ տողադարձն (wrap) անջատված է, բոլոր տարրերը ստիպողաբար տեղավորվում են մեկ տողում և կարող են սեղմվել: Միացնելու դեպքում այն տարրերը, որոնք այլևս չեն տեղավորվում, տեղափոխվում են հաջորդ տող. հենց այդ ժամանակ է ակտիվանում align-content-ը՝ բաշխելով տողերի միջև եղած տարածությունը: Gap-ը սահմանում է տարրերի և տողերի միջև հեռավորությունը՝ առանց margin-ների օգտագործման:
Արդյո՞ք իմ ստեղծած դասավորությունը պահպանվում է սերվերում:
Ոչ, Ձեր դասավորությունը կառուցվում է անմիջապես Ձեր բրաուզերում: Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo, ինչը երաշխավորում է, որ աշխատանքն ամբողջությամբ կատարվում է տեղային եղանակով: