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