Flex
Արագ կառավարեք ցանցի սյունակների դասավորությունը, հավասարեցումը և չափերը, նավիգացիան, բաղադրիչները և ավելին՝ արձագանքող flexbox կոմունալ ծառայությունների ամբողջական փաթեթով: Ավելի բարդ ներդրման համար կարող է անհրաժեշտ լինել հատուկ CSS:
Միացնել ճկուն վարքագիծը
Կիրառեք display
կոմունալ ծառայություններ՝ ֆլեքսբոքս կոնտեյներ ստեղծելու և երեխաների ուղղակի տարրերը ճկուն տարրերի վերածելու համար: Flex տարաները և իրերը կարող են փոփոխվել լրացուցիչ ճկուն հատկություններով:
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
Պատասխանատու տատանումներ կան նաև .d-flex
և .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex
Ուղղություն
Սահմանեք ֆլեքս տարրերի ուղղությունը ճկուն կոնտեյներով՝ ուղղության կոմունալ ծառայություններով: Շատ դեպքերում դուք կարող եք բաց թողնել հորիզոնական դասը այստեղ, քանի որ դիտարկիչի լռելյայն է row
: Այնուամենայնիվ, դուք կարող եք հանդիպել այնպիսի իրավիճակների, երբ դուք պետք է հստակորեն սահմանեիք այս արժեքը (օրինակ՝ արձագանքող դասավորությունները):
Օգտագործեք .flex-row
հորիզոնական ուղղություն սահմանելու համար (զննարկչի լռելյայն) կամ .flex-row-reverse
հորիզոնական ուղղությունը հակառակ կողմից սկսելու համար:
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
Օգտագործեք .flex-column
ուղղահայաց ուղղություն սահմանելու համար կամ .flex-column-reverse
ուղղահայաց ուղղությունը հակառակ կողմից սկսելու համար:
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
Պատասխանատու տատանումներ կան նաև flex-direction
.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse
Հիմնավորել բովանդակությունը
Օգտագործեք justify-content
ֆլեքսբոքս կոնտեյներների կոմունալ ծառայությունները՝ հիմնական առանցքի վրա ֆլեքս տարրերի դասավորվածությունը փոխելու համար (սկսելու համար x առանցքը, եթե y առանցքը flex-direction: column
): Ընտրեք start
(զննարկիչի լռելյայն), end
, center
, between
, around
կամ evenly
:
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
Պատասխանատու տատանումներ կան նաև justify-content
.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly
Հավասարեցնել իրերը
Օգտագործեք align-items
ֆլեքսբոքս կոնտեյներների կոմունալ ծրագրերը՝ փոխելու ճկուն տարրերի դասավորվածությունը խաչաձև առանցքի վրա (սկսելու համար y առանցքը, եթե . x առանցքը flex-direction: column
): Ընտրեք start
, end
, center
, baseline
կամ stretch
(զննարկիչի լռելյայն):
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
Պատասխանատու տատանումներ կան նաև align-items
.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch
Հավասարեցնել ինքն իրեն
Օգտագործեք align-self
կոմունալ ծրագրերը flexbox տարրերի վրա՝ առանձին-առանձին փոխելու դրանց հավասարեցումը խաչաձև առանցքի վրա (սկսելու համար նախատեսված y առանցքը, եթե՝ x առանցքը flex-direction: column
): Ընտրեք նույն ընտրանքներից, ինչ align-items
՝ start
, end
, center
, baseline
, կամ stretch
(զննարկիչի լռելյայն):
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
Պատասխանատու տատանումներ կան նաև align-self
.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch
Լրացնել
Օգտագործեք .flex-fill
դասը մի շարք եղբայրական տարրերի վրա, որպեսզի ստիպեք դրանք դարձնել իրենց բովանդակությանը հավասար լայնություններ (կամ հավասար լայնություններ, եթե դրանց բովանդակությունը չի գերազանցում իրենց սահմանային տուփերը), միաժամանակ գրավելով ողջ հասանելի հորիզոնական տարածքը:
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
Պատասխանատու տատանումներ կան նաև flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill
Աճել և փոքրանալ
Օգտագործեք .flex-grow-*
կոմունալ ծրագրերը, որպեսզի փոխեք ճկուն տարրի աճի հնարավորությունը՝ հասանելի տարածքը լրացնելու համար: Ստորև բերված օրինակում .flex-grow-1
տարրերն օգտագործում են բոլոր հասանելի տարածքները, որոնք կարող են, մինչդեռ մնացած երկու ճկուն տարրերին տալիս են իրենց անհրաժեշտ տարածքը:
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
Օգտագործեք .flex-shrink-*
կոմունալ ծառայություններ՝ անհրաժեշտության դեպքում ճկուն տարրի կրճատվելու հնարավորությունը փոխելու համար: Ստորև բերված օրինակում երկրորդ ճկուն տարրը .flex-shrink-1
ստիպված է փաթաթել իր բովանդակությունը նոր տողի մեջ՝ «փոքրանալով», որպեսզի ավելի շատ տեղ տա նախորդ ճկուն տարրի համար .w-100
.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
Պատասխանատու տատանումներ կան նաև flex-grow
և flex-shrink
.
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1
Ավտոմատ լուսանցքներ
Flexbox-ը կարող է շատ հիանալի բաներ անել, երբ դուք խառնում եք ճկուն հավասարեցումները ավտոմատ լուսանցքների հետ: Ստորև ներկայացված են ճկուն տարրերը ավտոմատ լուսանցքների միջոցով կառավարելու երեք օրինակ՝ լռելյայն (առանց ավտոմատ լուսանցքի), երկու տարր աջ ( .me-auto
) հրում և երկու տարր դեպի ձախ ( .ms-auto
):
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="me-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>
Հավասարեցնել իրերի հետ
Ուղղահայաց տեղափոխեք մեկ ճկուն տարր դեպի տարայի վերև կամ ներքև՝ խառնելով align-items
, flex-direction: column
և margin-top: auto
կամ margin-bottom: auto
:
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>
Պատել
Փոխեք, թե ինչպես են ճկուն իրերը փաթաթվում ճկուն տարայի մեջ: Ընտրեք ընդհանրապես առանց փաթաթման (զննարկիչի լռելյայն) .flex-nowrap
, փաթաթման հետ .flex-wrap
կամ հակադարձ փաթաթման հետ .flex-wrap-reverse
:
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
Պատասխանատու տատանումներ կան նաև flex-wrap
.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse
Պատվեր
Փոխեք որոշակի ճկուն տարրերի տեսողական կարգը մի քանի order
կոմունալ ծառայությունների միջոցով: Մենք տրամադրում ենք միայն տարրը առաջինը կամ վերջինը պատրաստելու տարբերակներ, ինչպես նաև վերակայում DOM պատվերն օգտագործելու համար: Քանի որ order
վերցնում է ցանկացած ամբողջ արժեք 0-ից մինչև 5, ավելացրեք հատուկ CSS ցանկացած լրացուցիչ արժեքի համար:
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>
Պատասխանատու տատանումներ կան նաև order
.
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5
Բացի այդ, կան նաև արձագանքող .order-first
և .order-last
դասեր, որոնք փոխում են order
տարրի արժեքը՝ համապատասխանաբար կիրառելով order: -1
և order: 6
.
.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last
Հավասարեցնել բովանդակությունը
Օգտագործեք կոմունալ ծառայություններ flexboxalign-content
բեռնարկղերի վրա՝ ֆլեքս տարրերը խաչաձև առանցքի վրա հավասարեցնելու համար: Ընտրեք (զննարկիչի լռելյայն), , , , կամ : Այս կոմունալ ծառայությունները ցուցադրելու համար մենք պարտադրել և ավելացրել ենք ճկուն տարրերի քանակը:start
end
center
between
around
stretch
flex-wrap: wrap
Գլուխը վեր Այս հատկությունը չի ազդում ճկուն տարրերի առանձին տողերի վրա:
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
Պատասխանատու տատանումներ կան նաև align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch
Մեդիա օբյեկտ
Ցանկանու՞մ եք կրկնօրինակել մեդիա օբյեկտի բաղադրիչը Bootstrap 4-ից: Վերստեղծեք այն կարճ ժամանակում մի քանի ճկուն կոմունալ ծառայությունների միջոցով, որոնք թույլ են տալիս ավելի մեծ ճկունություն և հարմարեցում, քան նախկինում:
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
Եվ ասեք, որ ցանկանում եք ուղղահայաց կենտրոնացնել բովանդակությունը պատկերի կողքին.
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
Սաս
Utilities API
Flexbox-ի կոմունալ ծառայությունները հայտարարված են մեր կոմունալ ծրագրերի API-ում scss/_utilities.scss
: Իմացեք, թե ինչպես օգտագործել կոմունալ ծառայությունների API-ը:
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),