Source

Flex

Jikwaa ngwa ngwa, nhazi na nha nke kọlụm grid, igodo, akụrụngwa na ihe ndị ọzọ site na iji ngwa ngwa flexbox na-anabata ngwa ngwa. Maka mmejuputa iwu siri ike karị, CSS omenala nwere ike ịdị mkpa.

Kwado omume mgbanwe

Tinye displayakụrụngwa iji mepụta akpa flexbox wee gbanwee ihe ụmụaka na-eduzi ka ọ bụrụ ihe na-agbanwe agbanwe . Enwere ike ịmegharị arịa na ihe ndị na-agbanwe agbanwe site na iji njirimara mgbanwe ndị ọzọ.

Abụ m akpa flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Abụ m akpa flexbox inline!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Ọdịiche na-anabatakwa dịkwa maka .d-flexna .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

Ntuziaka

Tọọ ntụzịaka nke ihe ndị na-agbanwe agbanwe n'ime akpa mkpụgharị nwere ihe ntụzi aka. N'ọtụtụ oge, ị nwere ike ịhapụ klaasị kwụ ọtọ ebe a ka ihe nchọgharị ndabere bụ row. Otú ọ dị, ị nwere ike izute ọnọdụ ebe ịchọrọ ịtọ uru a n'ụzọ doro anya (dị ka nhazi na-anabata).

Jiri .flex-rowka ịtọọ ntụzịaka kwụ ọtọ (ndabara ihe nchọgharị ahụ), ma ọ bụ .flex-row-reverseka ịmalite ntụzịaka kwụ n'akụkụ nke ọzọ.

Flex ihe 1
Flex ihe 2
Flex ihe 3
Flex ihe 1
Flex ihe 2
Flex ihe 3
<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>

Jiri .flex-columnka ịtọ ụzọ kwụ ọtọ, ma ọ bụ .flex-column-reverseka ịmalite ụzọ kwụ ọtọ site n'akụkụ nke ọzọ.

Flex ihe 1
Flex ihe 2
Flex ihe 3
Flex ihe 1
Flex ihe 2
Flex ihe 3
<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>

Ọdịiche na-anabatakwa dịkwa maka 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

Hazie ọdịnaya

Jiri justify-contentakụrụngwa na igbe flexbox ka ịgbanwee nhazi nke ihe ngbanwe na axis isi (axis x-amalite, y-axis ma ọ bụrụ flex-direction: column). Họrọ site na start(ndabara ihe nchọgharị), end, center, between, ma ọ bụ around.

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

Ọdịiche na-anabatakwa dịkwa maka 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

Hazie ihe

Jiri align-itemsakụrụngwa dị na igbe flexbox iji gbanwee nhazi nke ihe ndị na-agbanwe agbanwe na axis obe (y-axis ịmalite, x-axis ma ọ bụrụ flex-direction: column). Họrọ site na start, end, center, baseline, ma ọ bụ stretch(ndabara ihe nchọgharị).

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

Ọdịiche na-anabatakwa dịkwa maka 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

Hazie onwe

Jiri align-selfutilities na flexbox ihe ka ịgbanwee n'otu n'otu ha alignment na cross axis (y-axis na-amalite, x-axis ma ọ bụrụ flex-direction: column). Họrọ n'otu nhọrọ dị ka align-items: start, end, center, baseline, ma ọ bụ stretch(ndabara ihe nchọgharị).

Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
Flex ihe
Ihe ngbanwe agbanweela
Flex ihe
<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>

Ọdịiche na-anabatakwa dịkwa maka 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

Jupụta

Jiri .flex-fillklaasị n'usoro nke ihe nwanne ka ịmanye ha ka ha n'obosara nhata ka ị na-ewere oghere niile dị n'ahịrị. Ọ bara uru karịsịa maka obosara nhata, ma ọ bụ ezi omume, igodo.

Flex ihe
Flex ihe
Flex ihe
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Ọdịiche na-anabatakwa dịkwa maka flex-fill.

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

Too na adalata

Jiri .flex-grow-*akụrụngwa ka ịgbanwee ike ihe na-agbanwe agbanwe iji mejupụta oghere dị. N'ihe atụ dị n'okpuru ebe a, ihe .flex-grow-1ndị ahụ na-eji ohere niile ọ nwere ike, ebe ha na-ahapụ ihe abụọ fọdụrụnụ na-agbanwe agbanwe ohere ha dị mkpa.

Flex ihe
Flex ihe
Ihe mgbanwe mgbanwe nke atọ
<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>

Jiri .flex-shrink-*akụrụngwa ka ịgbanwee ike ihe na-agbanwe agbanwe ọ bụrụ na ọ dị mkpa. N'ihe atụ dị n'okpuru, a na .flex-shrink-1-amanye ihe mgbanwe nke abụọ nwere ka ọ kechie ọdịnaya ya na ahịrị ọhụrụ, "na-adaba" iji nyekwuo ohere maka ihe mgbanwe gara aga na .w-100.

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

Ọdịiche na-anabatakwa dịkwa maka flex-growna 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

Oke akpaaka

Flexbox nwere ike ime ụfọdụ ọmarịcha ihe mara mma mgbe ị na-agwakọta flex alignments na oke akpaaka. Egosiri n'okpuru bụ ọmụmaatụ atọ nke ịchịkwa ihe mgbanwe site na oke akpaaka: ndabara (enweghị oke akpaaka), ịkwanye ihe abụọ n'aka nri ( .mr-auto), na ịkwanye ihe abụọ n'aka ekpe ( .ml-auto).

Ọ dị nwute, IE10 na IE11 anaghị akwado oke akpaaka nke ọma na ihe flex nke nne na nna nwere justify-contenturu na-abụghị nke ndabara. Lee azịza StackOverflow a maka nkọwa ndị ọzọ.

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

Na nhazi-ihe

Bugharịa otu ihe na-agbanwe agbanwe gaa n'elu ma ọ bụ ala nke akpa site na ịgwakọta align-items, flex-direction: column, na margin-top: automa ọ bụ margin-bottom: auto.

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

Kechie

Gbanwee ka ihe ndị na-agbanwe agbanwe si kechie n'ime akpa mgbanwe. Họrọ n'enweghị ihe mkpuchi ma ọlị (ndabara ihe nchọgharị ahụ) na .flex-nowrap, ijikọ ya na .flex-wrap, ma ọ bụ tụgharịa jiri .flex-wrap-reverse.

Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex flex-nowrap">
  ...
</div>
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex flex-wrap">
  ...
</div>
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
Flex ihe
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Ọdịiche na-anabatakwa dịkwa maka 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

Nye iwu

Gbanwee usoro a na -ahụ anya nke ihe ndị na-agbanwe agbanwe site na iji obere orderngwa ọrụ. Anyị na-enye naanị nhọrọ maka ịme ihe mbụ ma ọ bụ nke ikpeazụ, yana ntọgharị iji iji usoro DOM. Dị ka orderọ na-ewe uru integer ọ bụla (dịka, 5), gbakwunye CSS omenala maka ụkpụrụ agbakwunyere ọ bụla achọrọ.

Ihe mbụ mgbanwe
Ihe mgbanwe mgbanwe nke abụọ
Ihe mgbanwe mgbanwe nke atọ
<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>

Ọdịiche na-anabatakwa dịkwa maka 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

Hazie ọdịnaya

Jiri align-contentakụrụngwa na arịa flexbox kwado ihe ndị na-agbanwe agbanwe ọnụ na axis cross. Họrọ site na start(ndabara ihe nchọgharị), end, center, between, around, ma ọ bụ stretch. Iji gosi akụrụngwa ndị a, anyị etinyela flex-wrap: wrapma mụbaa ọnụ ọgụgụ nke flex ihe.

Welie isi elu! Ngwongwo a enweghị mmetụta na otu ahịrị nke ihe mgbanwe.

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

Ọdịiche na-anabatakwa dịkwa maka 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