in English

Fflecs

Rheoli cynllun, aliniad a maint colofnau grid, llywio, cydrannau, a mwy yn gyflym gyda chyfres lawn o gyfleustodau flexbox ymatebol. Ar gyfer gweithrediadau mwy cymhleth, efallai y bydd angen CSS personol.

Galluogi ymddygiadau hyblyg

Cymhwyso displaycyfleustodau i greu cynhwysydd flexbox a thrawsnewid elfennau uniongyrchol plant yn eitemau hyblyg. Gellir addasu cynwysyddion ac eitemau hyblyg ymhellach gydag eiddo fflecs ychwanegol.

Rwy'n cynhwysydd flexbox!

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

Rwy'n cynhwysydd flexbox mewn-lein!

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

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer .d-flexa .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

Cyfeiriad

Gosodwch gyfeiriad eitemau fflecs mewn cynhwysydd fflecs gyda chyfleustodau cyfeiriad. Yn y rhan fwyaf o achosion gallwch hepgor y dosbarth llorweddol yma gan mai rhagosodiad y porwr yw row. Fodd bynnag, efallai y byddwch yn dod ar draws sefyllfaoedd lle roedd angen i chi osod y gwerth hwn yn benodol (fel cynlluniau ymatebol).

Defnyddiwch .flex-rowi osod cyfeiriad llorweddol (rhagosodiad y porwr), neu .flex-row-reversei gychwyn y cyfeiriad llorweddol o'r ochr arall.

Eitem hyblyg 1

Eitem 2 hyblyg

Eitem 3 hyblyg

Eitem hyblyg 1

Eitem 2 hyblyg

Eitem 3 hyblyg

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

Defnyddiwch .flex-columni osod cyfeiriad fertigol, neu .flex-column-reversei gychwyn y cyfeiriad fertigol o'r ochr arall.

Eitem hyblyg 1

Eitem 2 hyblyg

Eitem 3 hyblyg

Eitem hyblyg 1

Eitem 2 hyblyg

Eitem 3 hyblyg

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

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer 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

Cyfiawnhau cynnwys

Defnyddiwch justify-contentgyfleustodau ar gynwysyddion fflecs i newid aliniad eitemau fflecs ar y brif echelin (yr echelin-x i gychwyn, echel-y os flex-direction: column). Dewiswch o start(diofyn porwr), end, center, , between, neu around.

Eitem fflecs

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

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer 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

Alinio eitemau

Defnyddiwch align-itemsgyfleustodau ar gynwysyddion flexbox i newid aliniad eitemau fflecs ar yr echel groes (yr echelin-y i ddechrau, echel x os flex-direction: column). Dewiswch o start, end, , center, baseline, neu stretch(diofyn porwr).

Eitem fflecs

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

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer 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

Alinio hunan

Defnyddiwch align-selfgyfleustodau ar eitemau flexbox i newid eu haliniad yn unigol ar yr echel groes (yr echelin-y i ddechrau, echelin-x os flex-direction: column). Dewiswch o'r un opsiynau â align-items: start, end, center, , baseline, neu stretch(diofyn porwr).

Eitem fflecs

Eitem fflecs wedi'i halinio

Eitem fflecs

Eitem fflecs wedi'i halinio

Eitem fflecs

Eitem fflecs wedi'i halinio

Eitem fflecs

Eitem fflecs wedi'i halinio

Eitem fflecs

Eitem fflecs wedi'i halinio

Eitem fflecs

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

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer 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

Llenwch

Defnyddiwch y .flex-filldosbarth ar gyfres o elfennau brawd neu chwaer i'w gorfodi i led sy'n hafal i'w cynnwys (neu led cyfartal os nad yw eu cynnwys yn fwy na'u blychau ymyl) tra'n cymryd yr holl ofod llorweddol sydd ar gael.

Eitem hyblyg gyda llawer o gynnwys

Eitem fflecs

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

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer flex-fill.

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

Tyfu a chrebachu

Defnyddiwch .flex-grow-*gyfleustodau i newid gallu eitem fflecs i dyfu i lenwi'r gofod sydd ar gael. Yn yr enghraifft isod, mae'r .flex-grow-1elfennau'n defnyddio'r holl le sydd ar gael y gall, tra'n caniatáu gofod angenrheidiol i'r ddwy eitem hyblyg sy'n weddill.

Eitem fflecs

Trydydd eitem fflecs

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

Defnyddiwch .flex-shrink-*gyfleustodau i newid gallu eitem fflecs i grebachu os oes angen. Yn yr enghraifft isod, mae'r ail eitem hyblyg .flex-shrink-1yn cael ei gorfodi i lapio ei chynnwys i linell newydd, gan “grebachu” i ganiatáu mwy o le ar gyfer yr eitem fflecs flaenorol gyda .w-100.

Eitem fflecs

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

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer flex-growa 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

Ymylon Auto

Gall Flexbox wneud rhai pethau eithaf anhygoel pan fyddwch chi'n cymysgu aliniadau fflecs ag ymylon ceir. Isod mae tair enghraifft o reoli eitemau hyblyg trwy ymylon ceir: rhagosodiad (dim ymyl auto), gwthio dwy eitem i'r dde ( .mr-auto), a gwthio dwy eitem i'r chwith ( .ml-auto).

Yn anffodus, nid yw IE10 ac IE11 yn cefnogi ymylon ceir yn iawn ar eitemau hyblyg y mae gan eu rhiant justify-contentwerth nad yw'n ddiofyn. Gweler yr ateb StackOverflow hwn am ragor o fanylion.

Eitem fflecs

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

Gyda aliniad-eitemau

Symudwch un eitem fflecs yn fertigol i ben neu waelod cynhwysydd trwy gymysgu align-items, flex-direction: column, a margin-top: autoneu margin-bottom: auto.

Eitem fflecs

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

Lapiwch

Newid sut mae eitemau fflecs yn lapio mewn cynhwysydd fflecs. Dewiswch o ddim lapio o gwbl (y porwr rhagosodedig) gyda .flex-nowrap, lapio gyda .flex-wrap, neu wrthdroi lapio gyda .flex-wrap-reverse.

Eitem fflecs

<div class="d-flex flex-nowrap">
  ...
</div>

Eitem fflecs

<div class="d-flex flex-wrap">
  ...
</div>

Eitem fflecs

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

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer 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

Gorchymyn

Newidiwch drefn weledol eitemau hyblyg penodol gyda llond llaw o ordergyfleustodau. Rydym ond yn darparu opsiynau ar gyfer gwneud eitem yn gyntaf neu'n olaf, yn ogystal ag ailosodiad i ddefnyddio'r archeb DOM. Fel ordersy'n cymryd unrhyw werth cyfanrif (ee, 5), ychwanegwch CSS personol ar gyfer unrhyw werthoedd ychwanegol sydd eu hangen.

Eitem fflecs gyntaf

Ail eitem fflecs

Trydydd eitem fflecs

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

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer 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

Alinio cynnwys

Defnyddiwch align-contentgyfleustodau ar gynwysyddion flexbox i alinio eitemau fflecs gyda'i gilydd ar yr echel groes. Dewiswch o start(diofyn porwr), end, center, , between, around, neu stretch. Er mwyn dangos y cyfleustodau hyn, rydym wedi gorfodi flex-wrap: wrapa chynyddu nifer yr eitemau hyblyg.

Pennau i fyny! Nid yw'r eiddo hwn yn cael unrhyw effaith ar resi sengl o eitemau fflecs.

Eitem fflecs

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Eitem fflecs

<div class="d-flex align-content-end flex-wrap">...</div>

Eitem fflecs

<div class="d-flex align-content-center flex-wrap">...</div>

Eitem fflecs

<div class="d-flex align-content-between flex-wrap">...</div>

Eitem fflecs

<div class="d-flex align-content-around flex-wrap">...</div>

Eitem fflecs

<div class="d-flex align-content-stretch flex-wrap">...</div>

Mae amrywiadau ymatebol hefyd yn bodoli ar gyfer 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