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

Ուղղություն

Սահմանեք ֆլեքս տարրերի ուղղությունը ճկուն կոնտեյներով՝ ուղղության կոմունալ ծառայություններով: Շատ դեպքերում դուք կարող եք բաց թողնել հորիզոնական դասը այստեղ, քանի որ դիտարկիչի լռելյայն է 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

Հիմնավորել բովանդակությունը

Օգտագործեք justify-contentֆլեքսբոքս կոնտեյներների կոմունալ ծառայությունները՝ հիմնական առանցքի վրա ֆլեքս տարրերի դասավորվածությունը փոխելու համար (սկսելու համար x առանցքը, եթե y առանցքը flex-direction: column): Ընտրեք start(զննարկիչի լռելյայն), end, center, betweenկամ around:

<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>

Պատասխանատու տատանումներ կան նաև justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

Հավասարեցնել իրերը

Օգտագործեք 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-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

Լրացնել

Օգտագործեք .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-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

Ավտոմատ լուսանցքներ

Flexbox-ը կարող է շատ հիանալի բաներ անել, երբ դուք խառնում եք ճկուն հավասարեցումները ավտոմատ լուսանցքների հետ: Ստորև ներկայացված են ճկուն տարրերը ավտոմատ լուսանցքների միջոցով կառավարելու երեք օրինակ՝ լռելյայն (առանց ավտոմատ լուսանցքի), երկու տարր աջ ( .mr-auto) հրում և երկու տարր դեպի ձախ ( .ml-auto):

Ցավոք, IE10-ը և IE11-ը պատշաճ կերպով չեն ապահովում ավտոմատ լուսանցքները ճկուն տարրերի վրա, որոնց մայրն ունի ոչ լռելյայն justify-contentարժեք: Լրացուցիչ մանրամասների համար տես StackOverflow-ի այս պատասխանը :

<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="mr-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="ml-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

Պատվեր

Փոխեք որոշակի ճկուն տարրերի տեսողական կարգը մի քանի orderկոմունալ ծառայությունների միջոցով: Մենք տրամադրում ենք միայն տարրը առաջինը կամ վերջինը պատրաստելու տարբերակներ, ինչպես նաև վերակայում DOM պատվերն օգտագործելու համար: Քանի որ orderընդունում է ցանկացած ամբողջ արժեք (օրինակ, 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-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

Հավասարեցնել բովանդակությունը

Օգտագործեք կոմունալ ծառայություններ flexboxalign-content բեռնարկղերի վրա՝ ֆլեքս տարրերը խաչաձև առանցքի վրա հավասարեցնելու համար: Ընտրեք (զննարկիչի լռելյայն), , , , կամ : Այս կոմունալ ծառայությունները ցուցադրելու համար մենք պարտադրել և ավելացրել ենք ճկուն տարրերի քանակը:startendcenterbetweenaroundstretchflex-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