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">I'm a flexbox container!</div><div class="d-inline-flex p-2">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">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">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">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">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
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">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">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" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">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">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">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