Flex

Mu awọn ihuwasi rọ

Waye displayawọn ohun elo lati ṣẹda apoti flexbox ki o yi awọn eroja ti awọn ọmọde taara pada si awọn ohun kan rọ. Awọn apoti Flex ati awọn ohun kan ni anfani lati ṣe atunṣe siwaju pẹlu awọn ohun-ini irọrun.

<div class="d-flex p-2">I'm a flexbox container!</div>

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Awọn iyatọ idahun tun wa fun .d-flexati .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

Itọsọna

Ṣeto itọsọna ti awọn ohun kan ti o rọ sinu apo eiyan pẹlu awọn ohun elo itọnisọna. Ni ọpọlọpọ igba o le fi kilaasi petele silẹ nibi bi aiyipada aṣawakiri jẹ row. Sibẹsibẹ, o le ba pade awọn ipo nibiti o nilo lati ṣeto iye yii ni gbangba (bii awọn ipalemo idahun).

Lo .flex-rowlati ṣeto itọnisọna petele (aiyipada aṣawakiri), tabi .flex-row-reverselati bẹrẹ itọsọna petele lati apa idakeji.

<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Lo .flex-columnlati ṣeto itọsọna inaro, tabi .flex-column-reverselati bẹrẹ itọsọna inaro lati apa idakeji.

<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Awọn iyatọ idahun tun wa fun 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

Da akoonu

Lo justify-contentawọn ohun elo lori awọn apoti flexbox lati yi titete awọn ohun kan rọ lori ipo akọkọ (apa-x lati bẹrẹ, y-axis ti o ba jẹ flex-direction: column). Yan lati start(aiyipada aṣawakiri), end, center, between, around, tabi 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>

Awọn iyatọ idahun tun wa fun 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

Sopọ awọn nkan

Lo align-itemsawọn ohun elo lori awọn apoti flexbox lati yi titete ti awọn ohun kan rọ lori ipo agbelebu (y-axis lati bẹrẹ, x-axis ti o ba jẹ flex-direction: column). Yan lati start, end, center, baseline, tabi stretch(aiyipada aṣawakiri).

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

Awọn iyatọ idahun tun wa fun 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

Dapọ mọ ara ẹni

Lo align-selfawọn ohun elo lori awọn ohun kan flexbox lati ṣe iyipada titete wọn ni ẹyọkan lori ipo agbelebu (apa y lati bẹrẹ, x-axis ti o ba jẹ flex-direction: column). Yan lati awọn aṣayan kanna bi align-items: start, end, center, baseline, tabi stretch(aiyipada aṣawakiri).

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

Awọn iyatọ idahun tun wa fun 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

Kun

Lo .flex-fillkilasi naa lori lẹsẹsẹ awọn eroja arakunrin lati fi ipa mu wọn sinu awọn iwọn ti o dọgba si akoonu wọn (tabi awọn iwọn iwọn dogba ti akoonu wọn ko ba kọja awọn apoti aala wọn) lakoko gbigbe gbogbo aaye petele ti o wa.

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Awọn iyatọ idahun tun wa fun flex-fill.

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill
• .flex-xxl-fill

Dagba ati dinku

Lo .flex-grow-*awọn ohun elo lati yi agbara ohun kan rọ lati dagba lati kun aaye to wa. Ni apẹẹrẹ ni isalẹ, awọn .flex-grow-1eroja lo gbogbo aaye ti o wa ti o le, lakoko ti o ngbanilaaye awọn ohun elo meji ti o ku ni aaye pataki wọn.

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Lo .flex-shrink-*awọn ohun elo lati yi agbara ohun kan rọ lati dinku ti o ba jẹ dandan. Ni apẹẹrẹ ti o wa ni isalẹ, ohun elo ti o ni irọrun keji pẹlu .flex-shrink-1ti fi agbara mu lati fi ipari si awọn akoonu rẹ si laini titun kan, "isunkun" lati gba aaye diẹ sii fun ohun kan ti o rọ tẹlẹ pẹlu .w-100.

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Awọn iyatọ idahun tun wa fun flex-growati 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

Awọn ala aifọwọyi

Flexbox le ṣe diẹ ninu awọn ohun oniyi lẹwa nigbati o ba dapọ awọn tito nkan lẹsẹsẹ pẹlu awọn ala adaṣe. Ti o han ni isalẹ jẹ awọn apẹẹrẹ mẹta ti ṣiṣakoso awọn ohun kan rọ nipasẹ awọn ala adaṣe: aiyipada (ko si ala adaṣe), titari awọn ohun meji si apa ọtun ( .me-auto), ati titari awọn ohun meji si apa osi ( .ms-auto).

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Pẹlu titọ-ohun

Ni inaro gbe ohun kan rọ si oke tabi isalẹ ti apoti kan nipa dapọ align-items, flex-direction: column, ati margin-top: autotabi margin-bottom: auto.

<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Fi ipari si

Yi pada bi awọn ohun kan ti n yipada sinu apo eiyan kan. Yan lati ko si murasilẹ rara (aifọwọyi aṣawakiri) pẹlu .flex-nowrap, murasilẹ pẹlu .flex-wrap, tabi yipo pẹlu .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>

Awọn iyatọ idahun tun wa fun 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

Bere fun

Yi aṣẹ wiwo ti awọn ohun kan rọ pẹlu ọwọ awọn orderohun elo. A pese awọn aṣayan fun ṣiṣe ohun kan ni akọkọ tabi kẹhin, bakanna bi atunto lati lo aṣẹ DOM. Bi ordero ṣe gba iye odidi eyikeyi lati 0 si 5, ṣafikun aṣa CSS fun eyikeyi awọn iye afikun ti o nilo.

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Awọn iyatọ idahun tun wa fun 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

Ni afikun awọn idahun tun wa .order-firstati .order-lastawọn kilasi ti o yi orderohun elo pada nipa lilo order: -1ati order: 6, lẹsẹsẹ.

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

Sopọ akoonu

Lo align-contentawọn ohun elo lori awọn apoti flexbox lati mu awọn nkan rọ pọ lori ipo agbelebu. Yan lati start(aiyipada aṣawakiri), end, center, between, around, tabi stretch. Lati ṣe afihan awọn ohun elo wọnyi, a ti fi ipa flex-wrap: wrapmu ati pọ si nọmba awọn ohun kan rọ.

Efeti sile! Ohun-ini yii ko ni ipa lori awọn ori ila ẹyọkan ti awọn nkan rọ.

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

Awọn iyatọ idahun tun wa fun align-content.

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-between
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-between
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-between
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-between
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-between
• .align-content-xl-around
• .align-content-xl-stretch
• .align-content-xxl-start
• .align-content-xxl-end
• .align-content-xxl-center
• .align-content-xxl-between
• .align-content-xxl-around
• .align-content-xxl-stretch

Ohun elo media

Ṣe o n wa lati tun ṣe paati ohun elo media lati Bootstrap 4? Tun ṣe ni igba diẹ pẹlu awọn ohun elo irọrun diẹ ti o gba laaye paapaa irọrun ati isọdi ju ti iṣaaju lọ.

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

Ati pe o fẹ lati ni inaro aarin akoonu ti o tẹle aworan naa:

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

Sass

API Awọn ohun elo

Awọn ohun elo Flexbox jẹ ikede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

    "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
    ),
    "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,
      ),
    ),