Source

Thlep

Grid column, navigation, component leh thil dang tam tak layout, alignment, leh sizing te chu rang takin enkawl la, responsive flexbox utilities full suite hmangin enkawl rawh. Implementation complex zawk atan chuan custom CSS a ngai mai thei.

Flex behavior te chu enable rawh

Utilities hmangin flexbox displaycontainer siam la, direct children elements chu flex item-ah chantir rawh. Flex container leh thil awmte chu flex property dang nen siam danglam belh theih a ni bawk.

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

Responsive variation pawh a awm a, .d-flexleh .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

Kawh lam

Flex thil awmte chu direction utilities awmna flex container-ah dah la. A tam zawkah chuan hetah hian horizontal class hi i paih thei a, browser default chu row. Mahse, he value hi chiang taka set a ngaihna dinhmun (responsive layout ang chi) i tawk thei.

.flex-rowHorizontal direction set nan hmang la (browser default), a nih loh leh .flex-row-reversea sir lehlamah horizontal direction tan nan hmang ang che.

Flex item 1 a awm
Flex item 2 a awm
Flex item 3 a awm
Flex item 1 a awm
Flex item 2 a awm
Flex item 3 a awm
<div class="d-flex flex-row">
  <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>

.flex-columnVertical direction set nan hmang la , a nih loh leh .flex-column-reversea sir lehlamah vertical direction tan nan hmang bawk ang che.

Flex item 1 a awm
Flex item 2 a awm
Flex item 3 a awm
Flex item 1 a awm
Flex item 2 a awm
Flex item 3 a awm
<div class="d-flex flex-column">
  <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>

Responsive variation pawh a awm a, 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

Content dik tak siam rawh

Flexbox container-a utilities hmangin justify-contentmain axis-a flex thil awmte alignment thlak danglam rawh (the x-axis to start, y-axis if flex-direction: column). start(browser default), end, center, between, emaw atang hian thlang rawh around.

Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<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>

Responsive variation pawh a awm a, 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

Item te chu align rawh

Flexbox container-a utilities hmangin align-itemscross axis-a flex thil awmte alignment thlak rawh (the y-axis to start, x-axis if flex-direction: column). start, end, center, baseline, emaw stretch(browser default) atang hian thlang rawh .

Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<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>

Responsive variation pawh a awm a, 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 a ni

Flexbox item-a utilities hmangin align-selfcross axis-a an alignment pakhat zel thlak danglam (the y-axis to start, x-axis if flex-direction: column). align-items: start, end, center, baseline, emaw stretch(browser default) ang chiah option atang hian thlang rawh .

Flex item a ni
Aligned flex item a awm
Flex item a ni
Flex item a ni
Aligned flex item a awm
Flex item a ni
Flex item a ni
Aligned flex item a awm
Flex item a ni
Flex item a ni
Aligned flex item a awm
Flex item a ni
Flex item a ni
Aligned flex item a awm
Flex item a ni
<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>

Responsive variation pawh a awm a, 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

Auto margin a awm bawk

Flexbox hian flex alignment leh auto margins i mix hian thil mak tak tak a ti thei a. A hnuaia tarlan te hi auto margin hmanga flex item control dan entirnan pathum a ni: default (no auto margin), item pahnih dinglamah .mr-autonawr ( ), leh thil pahnih veilamah nawr ( .ml-auto).

Vanduaithlak takin IE10 leh IE11 te hian flex items parent non-default justify-contentvalue nei te auto margin an support tha lo hle. A chipchiar zawka hriat duh chuan he StackOverflow chhanna hi en la .

Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

Align-items te nen

Flex item pakhat chu container chunglam emaw hnuai lamah emaw vertical-in align-items, flex-direction: column, leh margin-top: autoor margin-bottom: auto.

Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex align-items-start flex-column" 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" 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>

Tuam

Flex thilte chu flex container-a an wrap dan thlak rawh. No wrapping at all (browser default) hmangin thlang la .flex-nowrap, wrapping with .flex-wrap, emaw reverse wrapping with .flex-wrap-reverse.

Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex flex-nowrap">
  ...
</div>
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex flex-wrap">
  ...
</div>
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Responsive variation pawh a awm a, 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

Thupek

Utility tlemte hmangin flex item bikte visual order chu thlak rawh . orderItem siam hmasak ber emaw, a hnuhnung ber emaw siamna tur option chauh kan pe a, chubakah DOM order hman theihna tur reset pawh kan pe bawk. As ordertakes any integer value (eg, 5), value dang mamawh tur custom CSS add tur a ni.

Flex item hmasa ber
Flex item pahnihna
Flex item pathumna a ni
<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>

Responsive variation pawh a awm a, 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

Content chu align rawh

Flexbox container-a utilities hmangin cross axis-a align-contentflex thilte chu align khawm rawh. start(browser default), end, center, between, around, emaw atang hian thlang rawh stretch. Heng utilities te hi entir nan hian flex-wrap: wrapflex items kan enforce a, kan tipung bawk.

Lu a ti sang a! He property hian flex item row pakhatah nghawng a nei lo.

Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex align-content-end flex-wrap">...</div>
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex align-content-center flex-wrap">...</div>
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex align-content-between flex-wrap">...</div>
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex align-content-around flex-wrap">...</div>
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
Flex item a ni
<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsive variation pawh a awm a, 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