Flex

Միացնել ճկուն վարքագիծը

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