CSS Flexbox գեներատոր
Ստեղծեք CSS Flexbox դասավորության կոդ` կարգավորելով ուղղությունը, հավասարեցումը, տողադարձը և տարրերի միջև հեռավորությունը:
Գործարկել գործիքը
CSS Flexbox գեներատորն օգնում է արագ ստեղծել կոնտեյների դասավորության CSS կոդ: Դուք կարող եք ընտրել տարրերի հիմնական ուղղությունը, հավասարեցումը գլխավոր և երկրորդական առանցքներով, տողադարձման կարգը և բլոկների միջև եղած հեռավորությունը: Լռելյայն կարգավորումներով գործիքն օգտագործում է տողային ուղղություն, կենտրոնացված հավասարեցում երկու առանցքներով, առանց տողադարձի տարբերակ և տասը պիքսել հեռավորություն: Յուրաքանչյուր դաշտ թույլ է տալիս մուտքագրել ցանկալի Flexbox հատկությունների արժեքները: Օրինակ, տարրերի ուղղության համար կարող եք նշել սյունակային կամ տողային տարբերակ, իսկ հեռավորության դաշտում գրված թիվը կոդում ավտոմատ ստանում է պիքսելային միավոր: Կարգավորումները լրացնելուց հետո գործիքը ձևավորում է պատրաստի CSS հատկությունների ամբողջական բլոկ: Ստացված կոդը ներառում է Flexbox միացման հրահանգը և նշված բոլոր կանոնները: Այն կարելի է անմիջապես պատճենել և տեղադրել ոճերի ֆայլում կամ HTML փաստաթղթի համապատասխան դասի մեջ: Սա հարմար է վեբ էջերի ինտերֆեյսներ կառուցելիս, երբ անհրաժեշտ է կարգավորել կոճակների, քարտերի կամ նավիգացիոն մենյուի ճշգրիտ դիրքը:
Հրահանգներ
- Ընտրեք կամ մուտքագրեք տարրերի ուղղությունը (օրինակ՝ row կամ column):
- Նշեք հավասարեցման կանոնը գլխավոր առանցքով (օրինակ՝ center, space-between կամ flex-start):
- Սահմանեք հավասարեցման կանոնը լայնական առանցքով (օրինակ՝ center կամ stretch):
- Նշեք տողադարձման կարգավիճակը (nowrap կամ wrap):
- Մուտքագրեք տարրերի միջև հեռավորության թվային արժեքը:
- Սեղմեք գեներացման կոճակը և պատճենեք ստացված CSS կոդը ձեր նախագծի մեջ:
Օրինակներ
- Կենտրոնացված շարք. ուղղությունը՝ row, հավասարեցումները՝ center, տողադարձը՝ nowrap, հեռավորությունը՝ 16: Արդյունքում ստացվում է կոճակները կամ պատկերակները հորիզոնական կենտրոնում դասավորող CSS կոդ:
- Ուղղահայաց սյունակ. ուղղությունը՝ column, հավասարեցումը գլխավոր առանցքով՝ flex-start, լայնականով՝ stretch, հեռավորությունը՝ 12: Ստացվում է բջջային մենյուի կամ քարտերի ուղղահայաց ցուցակի CSS կոդ:
ՀՏՀ
Ի՞նչ լռելյայն արժեքներ են օգտագործվում, եթե դաշտերը չլրացվեն:
Եթե դաշտերը մնան դատարկ, գործիքն օգտագործում է row ուղղությունը, center հավասարեցումը երկու առանցքներով, nowrap տարբերակը և 10 պիքսել հեռավորությունը:
Ինչպե՞ս է գեներացվում հեռավորության միավորը:
Մուտքագրված թվային արժեքին CSS կոդում ավտոմատ կերպով կցվում է px վերջածանցը (օրինակ՝ 15 դառնում է 15px):
Կարո՞ղ եմ ստացված կոդն օգտագործել անմիջապես ոճերի ֆայլում:
Այո, արտածված CSS տողերը պատրաստ են տեղադրման համար ցանկացած դասի կամ տարրի ոճային բլոկում: