Flexbox-ի գեներատոր
Կարգավորե՛ք flex կոնտեյները և դրա տարրերը տեսողական գործիքներով, հետևե՛ք փոփոխություններին իրական ժամանակում և պատճենե՛ք CSS-ը մեկ կտտոցով:
Ձեր դասավորությունը կառուցվում է անմիջապես Ձեր բրաուզերում: Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo:
ՀՏՀ
Ո՞րն է տարբերությունը 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-ների օգտագործման: