Source

Buigen

Beheer snel de lay-out, uitlijning en grootte van rasterkolommen, navigatie, componenten en meer met een volledige reeks responsieve flexbox-hulpprogramma's. Voor complexere implementaties kan aangepaste CSS nodig zijn.

Flexgedrag inschakelen

Pas displayhulpprogramma's toe om een ​​flexboxcontainer te maken en zet directe onderliggende elementen om in flexitems. Flexcontainers en items kunnen verder worden aangepast met extra flexeigenschappen.

Ik ben een flexboxcontainer!
<div class="d-flex p-2">I'm a flexbox container!</div>
Ik ben een inline flexbox container!
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Er zijn ook responsieve varianten voor .d-flexen .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

Richting

Stel de richting van flexitems in een flexcontainer in met richtingshulpprogramma's. In de meeste gevallen kunt u de horizontale klasse hier weglaten omdat de browser standaard is row. U kunt echter situaties tegenkomen waarin u deze waarde expliciet moest instellen (zoals responsieve lay-outs).

Gebruik .flex-rowdit om een ​​horizontale richting in te stellen (de standaardinstelling van de browser) of .flex-row-reverseom de horizontale richting vanaf de andere kant te starten.

Flex artikel 1
Flex artikel 2
Flex artikel 3
Flex artikel 1
Flex artikel 2
Flex artikel 3
<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>

Gebruik .flex-columnom een ​​verticale richting in te stellen of .flex-column-reverseom de verticale richting vanaf de andere kant te starten.

Flex artikel 1
Flex artikel 2
Flex artikel 3
Flex artikel 1
Flex artikel 2
Flex artikel 3
<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>

Er zijn ook responsieve varianten voor 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

Inhoud uitvullen

Gebruik justify-contenthulpprogramma's op flexboxcontainers om de uitlijning van flexitems op de hoofdas te wijzigen (de x-as om te beginnen, y-as als flex-direction: column). Kies uit start(browserstandaard), end, center, betweenof around.

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

Er zijn ook responsieve varianten voor 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

Artikelen uitlijnen

Gebruik align-itemshulpprogramma's op flexbox-containers om de uitlijning van flex-items op de dwarsas te wijzigen (de y-as om te beginnen, x-as als flex-direction: column). Kies uit start, end, center, baselineof stretch(browserstandaard).

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

Er zijn ook responsieve varianten voor 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

Zelf uitlijnen

Gebruik align-selfhulpprogramma's op flexbox-items om hun uitlijning op de dwarsas afzonderlijk te wijzigen (de y-as om te beginnen, x-as als flex-direction: column). Kies uit dezelfde opties als align-items: start, end, center, baselineof stretch(browserstandaard).

Flex artikel
Uitgelijnd flex item
Flex artikel
Flex artikel
Uitgelijnd flex item
Flex artikel
Flex artikel
Uitgelijnd flex item
Flex artikel
Flex artikel
Uitgelijnd flex item
Flex artikel
Flex artikel
Uitgelijnd flex item
Flex artikel
<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>

Er zijn ook responsieve varianten voor 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

Automatische marges

Flexbox kan behoorlijk geweldige dingen doen als je flex-uitlijningen combineert met automatische marges. Hieronder ziet u drie voorbeelden van het besturen van flexitems via automatische marges: standaard (geen automatische marge), twee items naar rechts duwen ( .mr-auto), en twee items naar links duwen ( .ml-auto).

Helaas bieden IE10 en IE11 geen goede ondersteuning voor automatische marges op flexitems waarvan de bovenliggende justify-contentwaarde een niet-standaardwaarde heeft. Zie dit StackOverflow-antwoord voor meer details.

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

Met align-items

Verplaats één flexitem verticaal naar de boven- of onderkant van een container door align-items, flex-direction: column, en margin-top: autoof te mengen margin-bottom: auto.

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

Wrap

Wijzig hoe flexitems in een flexcontainer worden gewikkeld. Kies uit helemaal geen terugloop (de standaard browser) met .flex-nowrap, .flex-wrapterugloop met of omgekeerd teruglopen met .flex-wrap-reverse.

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

Er zijn ook responsieve varianten voor 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

Bestellen

Verander de visuele volgorde van specifieke flexitems met een handvol orderhulpprogramma's. We bieden alleen opties om een ​​item als eerste of laatste te maken, evenals een reset om de DOM-bestelling te gebruiken. Zoals orderelke integerwaarde (bijv. 5), voegt u aangepaste CSS toe voor eventuele aanvullende waarden.

Eerste flexartikel
Tweede flexartikel
Derde flexartikel
<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>

Er zijn ook responsieve varianten voor 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

Inhoud uitlijnen

Gebruik hulpprogramma's op flexboxcontainersalign-content om flexitems op de dwarsas uit te lijnen. Kies uit (browserstandaard), , , , of . Om deze hulpprogramma's te demonstreren, hebben we het aantal flexitems afgedwongen en verhoogd.startendcenterbetweenaroundstretchflex-wrap: wrap

Kop op! Deze eigenschap heeft geen effect op enkele rijen flexitems.

Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
<div class="d-flex align-content-end flex-wrap">...</div>
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
<div class="d-flex align-content-center flex-wrap">...</div>
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
<div class="d-flex align-content-between flex-wrap">...</div>
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
<div class="d-flex align-content-around flex-wrap">...</div>
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
<div class="d-flex align-content-stretch flex-wrap">...</div>

Er zijn ook responsieve varianten voor 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