Source

Flex

Laola meralo ka potlako, tekano le boholo ba likholomo tsa grid, ho tsamaea, likarolo, le tse ling ka lethathamo le felletseng la lisebelisoa tse arabelang tsa flexbox. Bakeng sa ts'ebetsong e rarahaneng haholoanyane, CSS e tloaelehileng e ka 'na ea hlokahala.

Etsa hore boitšoaro bo hlephileng

Sebelisa displaylisebelisoa ho theha setshelo sa flexbox le ho fetola likarolo tsa bana tse tobileng hore e be lintho tse feto-fetohang. Lijana tsa Flex le lintho li khona ho fetoloa ho ea pele ka thepa e eketsehileng ea flex.

Ke sejana sa flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Ke inline flexbox setshelo!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Liphetoho tse arabelang li boetse li teng bakeng sa .d-flexle .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

Tataiso

Beha tsela ea lintho tse feto-fetohang ka har'a sets'oants'o se nang le lisebelisoa tsa tataiso. Maemong a mangata o ka siea sehlopha se otlolohileng mona kaha sebatli sa kamehla ke row. Leha ho le joalo, u ka 'na ua kopana le maemo ao u neng u hloka ho beha boleng bona ka mokhoa o hlakileng (joaloka meralo e arabelang).

Sebelisa .flex-rowho seta tsela e tšekaletseng (sebatli sa sebatli), kapa .flex-row-reverseho qala tsela e tšekaletseng ho tloha ka lehlakoreng le leng.

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

Sebelisa .flex-columnho beha tsela e otlolohileng, kapa .flex-column-reverseho qala tsela e otlolohileng ho tloha ka lehlakoreng le leng.

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

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Netefatsa litaba

Sebelisa justify-contentlisebelisoa holim'a lijana tsa flexbox ho fetola tekano ea lintho tse feto-fetohang holim'a axis e kholo (x-axis ho qala, y-axis haeba flex-direction: column). Khetha ho tsoa ho start(ea kamehla ea sebatli), end, center, between, kapa around.

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea 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>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Hlophisa lintho

Sebelisa align-itemslisebelisoa holim'a lijana tsa flexbox ho fetola tsela eo lintho tse feto-fetohang li leng ka har'a axis ea sefapano (k-axis ea ho qala, x-axis haeba flex-direction: column). Khetha ho tsoa ho start, end, center, baseline, kapa stretch(ea kamehla ea sebatli).

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea 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>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Ipakanye

Sebelisa align-selflisebelisoa linthong tsa flexbox ho fetola ka bonngoe tsela eo li tsamaisanang ka eona holim'a axis ea sefapano (y-axis ho qala, x-axis haeba flex-direction: column). Khetha ho tsoa likhethong tse tšoanang le tsa align-items: start, end, center, baseline, kapa stretch(ea kamehla ea sebatli).

Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea Flex
Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea Flex
Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea Flex
Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea Flex
Ntho ea Flex
Ntho ea flex e tsepamisitsoeng
Ntho ea 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>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Tlatsa

Sebelisa .flex-fillsehlopha letotong la lintho tsa banab'eno ho li qobella ka bophara bo lekanang ha u ntse u nka sebaka sohle se otlolohileng. E bohlokoa haholo bakeng sa ho tsamaea ka bophara bo lekanang, kapa ho lokeloang.

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
<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>

Liphetoho tse arabelang li boetse li teng bakeng sa flex-fill.

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

Hola le ho honyela

Sebelisa .flex-grow-*lisebelisoa ho fetola bokhoni ba ntho e fetohang ho hola ho tlatsa sebaka se fumanehang. Mohlala o ka tlase, .flex-grow-1likarolo li sebelisa sebaka sohle se fumanehang seo li ka se khonang, ha li ntse li lumella lintho tse peli tse setseng tsa flex sebaka sa tsona se hlokahalang.

Ntho ea Flex
Ntho ea Flex
Ntho ea boraro ea flex
<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>

Sebelisa .flex-shrink-*lisebelisoa ho fetola bokhoni ba ntho ea flex hore e fokotsehe ha ho hlokahala. Mohlaleng o ka tlase, ntho ea bobeli ea flex e .flex-shrink-1qobelloa ho phuthela litaba tsa eona moleng o mocha, "ho honyela" ho lumella sebaka se eketsehileng bakeng sa ntho e fetileng ea flex ka .w-100.

Ntho ea Flex
Ntho ea 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>

Liphetoho tse arabelang li boetse li teng bakeng sa flex-growle 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

Mekhahlelo ea likoloi

Flexbox e ka etsa lintho tse ntle haholo ha o kopanya lialgment tse feto-fetohang le mehala ea koloi. Ka tlaase mona ho na le mehlala e meraro ea ho laola lintho tse feto-fetohang ka maqheku a koloi: kamehla (ha ho margin ea koloi), ho sutumelletsa lintho tse peli ka ho le letona ( .mr-auto), le ho sutumelletsa lintho tse peli ka ho le letšehali ( .ml-auto).

Ka bomalimabe, IE10 le IE11 ha li tšehetse ka nepo li-margins tsa likoloi linthong tse feto-fetohang tseo motsoali oa tsona a nang le justify-contentboleng boo e seng ba kamehla. Sheba karabo ena ea StackOverflow bakeng sa lintlha tse ling.

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea 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>

Ka ho lumellana-lintho

Ka ho otloloha, suthisa ntho e le 'ngoe ka holimo kapa tlase ho setshelo ka ho kopanya align-items, flex-direction: columnkapa .margin-top: automargin-bottom: auto

Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea Flex
Ntho ea 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>

Qela

Fetola hore na lintho tse flexhang li phuthela joang ka har'a setshelo sa flex. Khetha ho se phutheloe ho hang (sebatli sa sebatli) ka .flex-nowrap, ho phuthela ka .flex-wrap, kapa ho phuthela ka morao ka .flex-wrap-reverse.

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

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Taelo

Fetola tatellano ea pono ea lintho tse ikhethileng ka lisebelisoa tse 'maloa order. Re fana feela ka likhetho tsa ho etsa ntho pele kapa ea ho qetela, hammoho le ho seta bocha ho sebelisa odara ea DOM. Joalo ka ha orderho hlokahala boleng bofe kapa bofe (mohlala, 5), eketsa CSS ea tloaelo bakeng sa boleng bofe kapa bofe bo hlokahalang.

Ntho ea pele ea flex
Ntho ea bobeli ea flex
Ntho ea boraro ea flex
<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>

Liphetoho tse arabelang li boetse li teng bakeng sa 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

Hlophisa litaba

Sebelisa align-contentlisebelisoa ho li-container tsa flexbox ho hokahanya lintho hammoho holim'a axis ea sefapano. Khetha ho tsoa ho start(ea kamehla ea sebatli), end, center, between, around, kapa stretch. Ho bonts'a lisebelisoa tsena, re qobelletse flex-wrap: wraple ho eketsa palo ea lintho tse feto-fetohang.

Hlokomela! Thepa ena ha e na phello meleng e le 'ngoe ea lintho tse feto-fetohang.

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

Liphetoho tse arabelang li boetse li teng bakeng sa 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