Bootstrap 4 Flex
Bootstrap 4 Flex
Gebruik buigklasse om die uitleg van Bootstrap 4-komponente te beheer.
Flexbox
Die grootste verskil tussen Bootstrap 3 en Bootstrap 4 is dat Bootstrap 4 nou flexbox gebruik, in plaas van floats, om die uitleg te hanteer.
Die buigsame boksuitlegmodule maak dit makliker om buigsame responsiewe uitlegstruktuur te ontwerp sonder om vlot of posisionering te gebruik. As jy nuut is met flex, kan jy daaroor lees in ons CSS Flexbox Tutoriaal .
Let wel: Flexbox word nie in IE9 en vroeër weergawes ondersteun nie.
As jy IE8-9-ondersteuning benodig, gebruik Bootstrap 3. Dit is die mees stabiele weergawe van Bootstrap, en dit word steeds deur die span ondersteun vir kritieke foutoplossings en dokumentasieveranderings. Geen nuwe kenmerke sal egter daarby gevoeg word nie.
Om 'n flexbox-houer te skep en direkte kinders in flex-items te transformeer, gebruik die d-flexklas:
Voorbeeld
Voorbeeld
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Om 'n inlyn flexbox-houer te skep, gebruik die d-inline-flexklas:
Voorbeeld
Voorbeeld
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Horisontale rigting
Gebruik .flex-rowom die buigitems horisontaal (langs mekaar) te vertoon. Dit is verstek.
Wenk: Gebruik .flex-row-reverse
om die horisontale rigting regs te belyn:
Voorbeeld
Voorbeeld
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Vertikale rigting
Gebruik .flex-columnom die buigitems vertikaal (bo-op mekaar) te vertoon, of .flex-column-reverse
om die vertikale rigting om te keer:
Voorbeeld
Voorbeeld
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Regverdig inhoud
Gebruik die .justify-content-*klasse om die belyning van buigitems te verander. Geldige klasse is start(verstek), end, center, betweenof around:
Voorbeeld
Voorbeeld
<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>
Vul / gelyke breedtes
Gebruik .flex-fillop buigsame items om hulle in gelyke breedtes te dwing:
Voorbeeld
Voorbeeld
<div class="d-flex">
<div class="p-2 bg-info
flex-fill">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Groei
Gebruik .flex-grow-1op 'n buigsame item om die res van die spasie op te neem. In die voorbeeld hieronder neem die eerste twee buigsame items hul nodige spasie op, terwyl die laaste item die res van die beskikbare spasie opneem:
Voorbeeld
Voorbeeld
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Wenk: Gebruik .flex-shrink-1op 'n buigsame item om dit te laat krimp indien nodig.
Orde
Verander die visuele volgorde van 'n spesifieke buigitem(e) met die .orderklasse. Geldige klasse is van 0 tot 12, waar die laagste getal die hoogste prioriteit het (orde-1 word voor bestelling-2 gewys, ens.):
Voorbeeld
Voorbeeld
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Outo-marges
Voeg maklik outomatiese marges by om items mee te buig .mr-auto(druk items na regs), of deur .ml-auto(druk items na links) te gebruik:
Voorbeeld
Voorbeeld
<div class="d-flex
bg-secondary">
<div class="p-2 mr-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item
3</div>
</div>
Wikkel
Beheer hoe buigsame items in 'n buigsame houer toegedraai word met .flex-nowrap(verstek), .flex-wrapof .flex-wrap-reverse.
Klik op die knoppies hieronder om die verskil tussen die drie klasse te sien, deur die vou van die buigsame items in die voorbeeldkassie te verander:
Voorbeeld
Voorbeeld
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
Belyn inhoud
Beheer die vertikale belyning van versamelde buigitems met die .align-content-*
klasse. Geldige klasse is .align-content-start(verstek), .align-content-end, .align-content-center, .align-content-between, .align-content-arounden .align-content-stretch.
Let wel: Hierdie klasse het geen effek op enkele rye buigitems nie.
Voorbeeld
Voorbeeld
<div class="d-flex flex-wrap
align-content-start">..</div>
<div class="d-flex
flex-wrap align-content-end">..</div>
<div class="d-flex
flex-wrap align-content-center">..</div>
<div class="d-flex
flex-wrap align-content-around">..</div>
<div class="d-flex
flex-wrap align-content-stretch">..</div>
Belyn items
Beheer die vertikale belyning van enkele rye buigitems met die .align-items-*
klasse. Geldige klasse is .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, en .align-items-stretch
(verstek).
Klik op die knoppies hieronder om die verskil tussen die vyf klasse te sien:
Voorbeeld
Voorbeeld
<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>
Belyn Self
Beheer die vertikale belyning van 'n gespesifiseerde buigitem met die .align-self-*
klasse. Geldige klasse is .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, en .align-self-stretch
(verstek).
Klik op die knoppies hieronder om die verskil tussen die vyf klasse te sien:
Voorbeeld
Voorbeeld
<div class="d-flex bg-light" style="height:150px">
<div
class="p-2 border">Flex item 1</div>
<div class="p-2 border
align-self-start">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
Responsiewe Flex-klasse
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |