Ni kiakia ṣakoso awọn ifilelẹ, titete, ati iwọn ti awọn ọwọn akoj, lilọ kiri, awọn paati, ati diẹ sii pẹlu suite kikun ti awọn ohun elo flexbox idahun. Fun awọn imuse idiju diẹ sii, CSS aṣa le jẹ pataki.

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.

Mo jẹ apoti flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Mo jẹ apoti apoti flexbox inline!
<div class="d-inline-flex p-2 bd-highlight">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

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.

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

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

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

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

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, tabi around.

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

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

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

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

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

Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
Nkan Flex
Nkan ti o fẹsẹmulẹ
Nkan Flex
<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

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.

Nkan Flex pẹlu ọpọlọpọ akoonu
Nkan Flex
Nkan Flex
<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>

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

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-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.

Nkan Flex
Nkan Flex
Kẹta Flex ohun kan
<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>

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.

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

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

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 ( .mr-auto), ati titari awọn ohun meji si apa osi ( .ml-auto).

Laanu, IE10 ati IE11 ko ṣe atilẹyin awọn ala adaṣe daradara lori awọn ohun kan ti o rọ ti obi wọn ni iye ti kii ṣe aiyipada justify-content. Wo idahun StackOverflow yii fun awọn alaye diẹ sii.

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

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.

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

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.

Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
<div class="d-flex flex-nowrap">
  ...
</div>
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
<div class="d-flex flex-wrap">
  ...
</div>
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
<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

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 (fun apẹẹrẹ, 5), ṣafikun aṣa CSS fun eyikeyi awọn iye afikun ti o nilo.

Ohun akọkọ rọ
Ohun kan Flex Keji
Kẹta Flex ohun kan
<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>

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

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

Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
<div class="d-flex align-content-end flex-wrap">...</div>
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
<div class="d-flex align-content-center flex-wrap">...</div>
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
<div class="d-flex align-content-between flex-wrap">...</div>
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
<div class="d-flex align-content-around flex-wrap">...</div>
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
Nkan Flex
<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