Mena
Laola ka pela peakanyo, go logaganya, le go lekanyetša bogolo bja dikholomo tša keriti, go sepelasepela, dikarolo, le tše dingwe ka sutu ye e tletšego ya didirišwa tša flexbox tše di arabelago. Bakeng sa diphethagatšo tše di raraganego kudu, CSS ya tlwaelo e ka nyakega.
Kgontšha maitshwaro a go koba
Diriša displaydidirišwa go hlama setshelo sa flexbox le go fetoša dielemente tša bana tša thwii go ba dilo tša go kobega. Ditshelo tša go koba le dilo di kgona go fetošwa go ya pele ka dithoto tša tlaleletšo tša go koba.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div><div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>Diphapano tša go arabela le tšona di gona 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
Taetšo
Beakanya tlhahlo ya dilo tša go koba ka gare ga setshelo sa go koba ka didirišwa tša tlhahlo. Maemong a mantši o ka tlogela sehlopha sa go rapalala mo ka ge go se fetoge ga sephephediši e le row. Le ge go le bjalo, o ka kopana le maemo ao o bego o swanetše go beakanya boleng bjo ka go lebanya (go swana le dipeakanyo tše di arabelago).
Šomiša .flex-rowgo beakanya tlhahlo ya go rapalala (ya sephephediši ya go se fetoge), goba .flex-row-reversego thoma tlhahlo ya go rapalala go tšwa ka lehlakoreng le le fapanego.
<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>Šomiša .flex-columngo beakanya tlhahlo ya go ema thwii, goba .flex-column-reversego thoma tlhahlo ya go ema thwii go tšwa ka lehlakoreng le le fapanego.
<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>Diphapano tša go arabela le tšona di gona 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
Lokafatša diteng
Šomiša justify-contentdidirišwa go ditshelo tša flexbox go fetoša go logaganya ga dilo tša go kobega godimo ga sele ye kgolo (x-axis go thoma, y-axis ge e ba flex-direction: column). Kgetha go tšwa go start(ya go se fetoge ya sephephediši), end, center, between, goba around.
<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>
Diphapano tša go arabela le tšona di gona 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
Logaganya dilo
Šomiša align-itemsdidirišwa go ditshelo tša flexbox go fetoša go logaganya ga dilo tša go kobega godimo ga sele ya sefapano (y-axis go thoma, x-axis ge e ba flex-direction: column). Kgetha go tšwa go start, end, center, baseline, goba stretch(ya go se fetoge ya sephephediši).
<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>
Diphapano tša go arabela le tšona di gona 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
Logaganya boithati
Diriša align-selfdidirišwa go dilo tša flexbox go fetoša ka botee go logaganya ga tšona godimo ga sele ya sefapano (y-axis go thoma, x-axis ge e ba flex-direction: column). Kgetha go tšwa go dikgetho tše di swanago le align-items: start, end, center, baseline, goba stretch(sephephediši sa go se fetoge).
<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>
Diphapano tša go arabela le tšona di gona 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
Tlatša
Šomiša .flex-fillsehlopha godimo ga lelokelelo la dielemente tša bana babo rena go di gapeletša go tsena ka bophara bjo bo lekanago le diteng tša tšona (goba bophara bjo bo lekanago ge e le gore diteng tša tšona di sa fete mapokisi a tšona a mellwane) mola o tšea sekgoba ka moka sa go rapalala seo se lego gona.
<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>Diphapano tša go arabela le tšona di gona bakeng sa flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
Gola le go fokotšega
Diriša .flex-grow-*didirišwa go fetoša bokgoni bja selo sa go kobega bja go gola go tlatša sekgoba seo se lego gona. Mohlaleng wo o lego ka mo tlase, .flex-grow-1dielemente di šomiša sekgoba ka moka seo se lego gona seo e ka se kgonago, mola di dumelela dilo tše pedi tše di šetšego tša go koba sekgoba sa tšona se se nyakegago.
<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>Diriša .flex-shrink-*didirišwa go fetoša bokgoni bja selo sa go kobega bja go fokotšega ge e ba go nyakega. Mohlaleng wo o lego ka mo tlase, selo sa bobedi sa go koba ka .flex-shrink-1se gapeletšega go phuthela dikagare tša sona go mothaladi o mofsa, se “fokotšega” go dumelela sekgoba se se oketšegilego sa selo sa peleng sa go koba ka .w-100.
<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>Diphapano tša go arabela le tšona di gona 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
Auto margins
Flexbox e ka dira dilo tše dingwe tše dibotse tše di šiišago ge o kopanya di-flex alignments le di-autor margin. Ka tlase ke mehlala e meraro ya go laola dilo tše di kobegilego ka di- auto margin: default (ga go na auto margin), go kgoromeletša dilo tše pedi ka go le letona ( .mr-auto), le go kgoromeletša dilo tše pedi ka go le letshadi ( .ml-auto).
Ka bomadimabe, IE10 le IE11 ga di thekge gabotse di-autor margin go dilo tše di kobegilego tšeo motswadi wa tšona a nago le justify-contentboleng bjo e sego bja go se fetoge. Bona karabo ye ya StackOverflow go hwetša dintlha tše dingwe.
<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 go logaganya-dilo
Suthiša ka go ema thwii selo se tee sa go koba godimo goba fase ga setshelo ka go hlakanya align-items, flex-direction: column, le margin-top: autogoba margin-bottom: auto.
<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>Phuthela
Fetoša ka moo dilo tša go kobega di phuthelago ka gona ka gare ga setshelo sa go kobega. Kgetha go tšwa go go se be le go phuthela le gatee (ya sephephediši ya go se fetoge) ka .flex-nowrap, go phuthela ka .flex-wrap, goba go bušetša morago go phuthela ka .flex-wrap-reverse.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
Diphapano tša go arabela le tšona di gona 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
Tatelano
Fetola tatelano ya pono ya dilo tše itšego tša go koba ka orderdidirišwa tše mmalwa. Re fana fela ka dikgetho tša go dira selo pele goba sa mafelelo, gammogo le go seta gape go šomiša taelo ya DOM. Bjalo ka ge ordere tšea boleng bjo bongwe le bjo bongwe bja palomoka (mohlala, 5), oketša CSS ya tlwaelo bakeng sa boleng bjo bongwe le bjo bongwe bja tlaleletšo bjo bo nyakegago.
<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>Diphapano tša go arabela le tšona di gona 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
Logaganya diteng
Šomiša align-contentdidirišwa go ditshelo tša flexbox go logaganya dilo tša go koba mmogo godimo ga sele ya sefapano. Kgetha go tšwa go start(ya go se fetoge ya sephephediši), end, center, between, around, goba stretch. Go bontšha didirišwa tše, re gapeleditše flex-wrap: wraple go oketša palo ya dilo tša go kobega.
Dihlogo godimo! Thepa ye ga e na mafelelo go methaladi e tee ya dilo tše di kobegilego.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
Diphapano tša go arabela le tšona di gona bakeng sa 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