CSS Flexbox ուղեցույց
CSS Flexbox հատկությունների, հիմնական արժեքների և դասավորության կոդային օրինակների արագ տեղեկատու:
Գործարկել գործիքը
CSS Flexbox տեղեկատուն օգնում է արագ գտնել ճկուն դասավորության բոլոր անհրաժեշտ հատկությունները, հնարավոր արժեքները և պատրաստի կանոնները: Գործիքը մանրամասն ներկայացնում է ինչպես ծնող կոնտեյների, այնպես էլ ներքին տարրերի վարքագիծը: Կոնտեյների բաժնում բացատրվում են տարրերի հորիզոնական կամ ուղղահայաց ուղղությունը, բազմատող տողադարձը, հիմնական և լայնակի առանցքներով բաշխումը, ինչպես նաև տարրերի միջև բացատները, օրինակ՝ 16px կամ 1rem արժեքներով: Լռելյայն կարգավորումները ներառում են տողային ուղղությունը, առանց տողադարձի ռեժիմը, սկզբնակետից հավասարեցումը և տարրերի ձգումը: Ներքին տարրերի բաժինը պարզաբանում է աճի գործակիցը, սեղմման կարգավորումը, բազային նախնական չափը, միասնական կարճ գրելաձևը, անհատական դիրքավորումը և հերթականությունը: Տեղեկատուում ներառված են նաև կիրառական CSS կաղապարներ, որոնք ցույց են տալիս բովանդակության կենտրոնացումը, նավիգացիոն գոտիները, ավտոմատ տողադարձվող քարտերը, կողային վահանակով դասավորությունները, էջի ներքևում ամրացված ստորոտը և հավասար բարձրությամբ սյուները: Այս տեղեկատուն հնարավորություն է տալիս ճշգրիտ ստուգել յուրաքանչյուր հատկության նշանակությունը և կառուցվածքը առանց ավելորդ փնտրտուքի: Այն հարմար է ինտերֆեյսների մշակման համար:
Հրահանգներ
- Ծանոթացեք Flexbox կոնտեյների և ներքին տարրերի հիմնական հատկություններին:
- Ընտրեք ձեր դասավորությանը համապատասխանող պարամետրերը կամ պատրաստի կաղապարը:
- Պատճենեք CSS հատկությունների արժեքները ձեր նախագծի ոճերի մեջ:
Օրինակներ
- Տարրերի կենտրոնացում. կոնտեյներին տրվում են display: flex, justify-content: center և align-items: center հատկությունները:
- Հավասար սյուներով բլոկ. կոնտեյներին տրվում է display: flex և gap: 1rem, իսկ սյուներին՝ flex: 1:
ՀՏՀ
Որո՞նք են Flexbox-ի լռելյայն հիմնական արժեքները:
Կոնտեյների համար լռելյայն գործում են տողային ուղղությունը (row), առանց տողադարձի ռեժիմը (nowrap), սկզբնակետից բաշխումը (flex-start) և տարրերի ձգումը (stretch): Տարրերն ունեն 0 աճ, 1 սեղմում և 0 հերթականություն:
Ինչպե՞ս է աշխատում gap հատկությունը:
gap հատկությունը սահմանում է միջտարածություն Flexbox տարրերի միջև: Որպես արժեք կարող են կիրառվել չափման տարբեր միավորներ, օրինակ՝ 16px կամ 1rem:
Ո՞ր կոդային կաղապարներն են ներառված տեղեկատուում:
Ուղեցույցը ներառում է կենտրոնացման, նավիգացիոն գոտու, տողադարձվող քարտերի, կողային վահանակի, ամրացված ստորոտի և հավասար սյուների CSS օրինակներ: