Flexbox | AppStrap Bootstrap Theme by Themelize.me

Flexbox:

Basics

Since Bootstrap 4 Alplha 6 Bootstrap has Flexbox support by default which makes use of the powerful CSS flexbile box layout module opening up a whole new world of layout power!

Flexbox allows you to quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

With Flexbox the parent element has the ability to control the direct child elements within it.

Browser Support

Internet Explorer 9 (and below) does not support Flexbox at all but fortunately AppStrap provides built in fallbacks so your AppStrap based sites will look great in Internet Explorer 9 anyway.

You can also choose to "opt out" of using Flexbox with AppStrap by simply adding the following line of code after all the other CSS files are included within the head tags: View code example

<link href="assets/css/no-flexbox.css" rel="stylesheet">

This will override the Bootstrap Flexbox elements and core AppStrap elements so they use display block & floats instead, magic!

Enable flex behaviors

To enable Flexbox on an element you can apply one of the following classes: .d-flex or .d-inline-flex .

Both classes are also responsive: .d-BREAKPOINT-flex and .d-BREAKPOINT-inline-flex so you can change the flex display per breakpoint too.

View code example

<div class="d-flex p-2 bg-light">I'm a flexbox container!</div>

I'm a flexbox container!

View code example

<div class="d-inline-flex p-2 bg-light">I'm an inline flexbox container!</div>

I'm an inline flexbox container!

Force equal height and width

To force all items within a flex container to be equal width simple add the class .flex-ew to each element within the flex container.

Flexbox will automatically force the heights to be the same size as the browser default is to strech.

View code example

<div class="d-flex flex-row bg-grey">
  <div class="p-2 bg-light m-2 flex-ew text-center">Flex column item 1</div>
  <div class="p-2 bg-light m-2 flex-ew text-center" style="height: 10rem;">Flex column item 2, i'm longest, everyone follows my height</div>
  <div class="p-2 bg-light m-2 flex-ew text-center">Flex column item 3</div>
</div>

Flex column item 1

Flex column item 2, i'm longest, everyone follows my height

Flex column item 3

Flex content direction

Flexbox considers content as either columns which stack on top of each other or rows which stack side by side. Bootstrap offers the following classes to control the content directions.

Columns

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

Both classes are also responsive: .flex-BREAKPOINT-column and .flex-BREAKPOINT-column-reverse so you can vertically stack elements from a given breakpoint (see: Responsive Columns and Rows below).

View code example

<div class="d-flex flex-column mb-3">
  <div class="p-2 bg-light mb-2">Flex column item 1</div>
  <div class="p-2 bg-light mb-2">Flex column item 2</div>
  <div class="p-2 bg-light mb-2">Flex column item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-light mb-2">Flex column reverse item 1</div>
  <div class="p-2 bg-light mb-2">Flex column reverse item 2</div>
  <div class="p-2 bg-light mb-2">Flex column reverse item 3</div>
</div>

Flex column item 1

Flex column item 2

Flex column item 3

Flex column reverse item 1

Flex column reverse item 2

Flex column reverse item 3

Rows

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

Both classes are also responsive: .flex-BREAKPOINT-row and .flex-BREAKPOINT-row-reverse so you can horizontally stack elements from a given breakpoint (see: Responsive Columns and Rows below).

View code example

<div class="d-flex flex-row mb-3 bg-grey">
  <div class="p-2 mr-2 bg-light">Flex row item 1</div>
  <div class="p-2 mr-2 bg-light">Flex row item 2</div>
  <div class="p-2 bg-light">Flex row item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-grey">
  <div class="p-2 bg-light">Flex row reverse item 1</div>
  <div class="p-2 mr-2 bg-light">Flex row reverse item 2</div>
  <div class="p-2 mr-2 bg-light">Flex row reverse item 3</div>
</div>

Flex row item 1

Flex row item 2

Flex row item 3

Flex row reverse item 1

Flex row reverse item 2

Flex row reverse item 3

Responsive Columns and Rows

Using the responsive versions of the columns and rows classes you can create responsive elements which for example might stack vertically on mobile and then stack horizontally on desktop.

You can combine with the spacer utilities to control the spacing between elements per breakpoint.

View code example

<div class="d-flex flex-column flex-md-row mb-3">
  <div class="p-2 mb-2 mb-md-0 mr-md-2 bg-light">Stacked vertically on small screens, stacked horizontal from md breakpoint up</div>
  <div class="p-2 mb-2 mb-md-0 mr-md-2 bg-light">Stacked vertically on small screens, stacked horizontal from md breakpoint up</div>
  <div class="p-2 mb-2 mb-md-0 bg-light">Stacked vertically on small screens, stacked horizontal from md breakpoint up</div>
</div>
<div class="d-flex flex-row flex-md-column">
  <div class="p-2 mr-2 mr-md-0 mb-md-2 bg-light">Side by side on mobile, stacked vertically from md breakpoint up</div>
  <div class="p-2 bg-light">Side by side on mobile, stacked vertically from md breakpoint up</div>
</div>

Stacked vertically on small screens, stacked horizontal from md breakpoint up

Side by side on mobile, stacked vertically from md breakpoint up

Horizontal alignment AKA justify content

To control the horizontal alignment of elements within the "flex" containers by using the following justify-content classes:

.justify-content-start and justify-content-BREAKPOINT-start :
aligns columns to the left ("start").
.justify-content-end and justify-content-BREAKPOINT-end :
aligns columns to the right ("end").
.justify-content-center and justify-content-BREAKPOINT-center :
aligns columns to the center ("center").
.justify-content-around and justify-content-BREAKPOINT-around :
centers columns and distributes them evenly.
.justify-content-between and justify-content-BREAKPOINT-between :
stretches columns to the full width of their row container and distributes them evenly.

View code example

<div class="d-flex justify-content-start mb-3 bg-grey">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>
<div class="d-flex justify-content-end mb-3 bg-grey">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>
<div class="d-flex justify-content-center mb-3 bg-grey">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>
<div class="d-flex justify-content-between mb-3 bg-grey">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>
<div class="d-flex justify-content-around bg-grey">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>

Flex item

Vertical alignment AKA align items

To control the vertical alignment of elements within the "flex" containers by using the following align-items classes:

.align-items-start and align-items-BREAKPOINT-start :
aligns columns to the top ("start").
.align-items-end and align-items-BREAKPOINT-end :
aligns columns to the bottom ("end").
.align-items-center and align-items-BREAKPOINT-center :
aligns columns to the middle ("center").
.align-items-stretch and align-items-BREAKPOINT-stretch :
stretches column to the full height of their row container.

You can also use align-self classes on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

The align-self classes are also responsive: .align-self-BREAKPOINT-(start|end|center|baseline|stretch)

View code example

<div class="d-flex align-items-start bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>
<div class="d-flex align-items-end bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>
<div class="d-flex align-items-center bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>
<div class="d-flex align-items-baseline bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>
<div class="d-flex align-items-stretch bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>
<div class="d-flex align-items-stretch bg-grey" style="height: 10rem">
  <div class="p-2 bg-light mr-2">Flex item: stretched</div>
  <div class="p-2 bg-light align-self-center mr-2">Flex item: align middle</div>
  <div class="p-2 bg-light">Flex item: stretched</div>
</div>

Flex item

Flex item: stretched

Flex item: align middle

Flex item: stretched

Responsive alignment

You can also mix and match the alignment classes to control vertical and horizontal alignment as well as controlling alignment per breakpoint.

View code example

<div class="d-flex align-items-start justify-content-center bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-light mr-2">Flex item: align top middle</div>
  <div class="p-2 bg-light">Flex item: align top middle</div>
</div>
<div class="d-flex bg-grey mb-3 align-items-md-center justify-content-md-center" style="height: 10rem">
  <div class="p-2 bg-light mr-2">Flex item: align center middle from md up</div>
  <div class="p-2 bg-light mr-2">Flex item: align center middle from md up</div>
  <div class="p-2 bg-light">Flex item: align center middle from md up</div>
</div>
<div class="d-flex bg-grey mb-3 align-items-stretch justify-content-around" style="height: 10rem">
  <div class="p-2 bg-light mr-2">Flex item: full height, even width all breakpoints</div>
  <div class="p-2 bg-light mr-2">Flex item: full height, even width all breakpoints</div>
  <div class="p-2 bg-light">Flex item: full height, even width all breakpoints</div>
</div>

Flex item: align top middle

Flex item: align center middle from md up

Flex item: full height, even width all breakpoints

Nested Flex elements

You can even nest Flex elements within Flex elements which allows you to continue the inner content and layout. This is useful to vertically & horizontally center content.

View code example

<div class="d-flex align-items-stretch justify-content-center bg-grey mb-3" style="height: 10rem">
  <div class="p-2 bg-light mx-1 d-flex align-items-center justify-content-center">
    <div class="p-3">Nested Flex item: align center middle</div>
  </div>
  <div class="p-2 bg-light mx-1 d-flex align-items-center justify-content-center">
    <div class="p-3">Nested Flex item: align center middle</div>
  </div>
</div>

Nested Flex item: align center middle

Auto margins

Easily move all flex items to one side, but keep another on the opposite end by mixing justify-content and align-items with ml-auto , mt-auto , mr-auto & mb-auto classes.

Alignment an auto margin will autmatically pull the item to the opposite margin. For example: setting mr-auto will pull the element to the left edge of the container.

View code example

<div class="d-flex justify-content-end bg-grey mb-3">
  <div class="mr-auto p-2 bg-light">Flex item aligned left</div>
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>

<div class="d-flex justify-content-start bg-grey mb-3">
  <div class="p-2 bg-light mr-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
  <div class="ml-auto p-2 bg-light">Flex item aligned right</div>
</div>

<div class="d-flex align-items-start flex-column bg-grey mb-3" style="height: 12rem;">
  <div class="mb-auto p-2 bg-light">Flex item aligned top</div>
  <div class="p-2 bg-light mb-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bg-grey mb-3" style="height: 12rem;">
  <div class="p-2 bg-light  mb-2">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
  <div class="mt-auto p-2 bg-light">Flex item align bottom</div>
</div>

Flex item aligned left

Flex item

Flex item aligned right

Flex item aligned top

Flex item

Flex item align bottom

Content Wrapping

Change how flex items wrap within a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap , wrapping with .flex-wrap , or reverse wrapping with .flex-wrap-reverse .

These classes are also responsive: .flex-BREAKPOINT-nowrap , .flex-BREAKPOINT-wrap and .flex-BREAKPOINT-wrap-reverse so you can control wrapping per breakpoint.

View code example

<!-- .flex-nowrap - overflows container -->
<div class="d-flex flex-nowrap bg-grey mb-3">
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>  
</div>

<!-- .flex-wrap - wraps elements ontop next lines -->
<div class="d-flex flex-wrap bg-grey mb-3">
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>  
</div>

<!-- .flex-wrap-reverse - wraps elements onto next lines in reverse order -->
<div class="d-flex flex-wrap-reverse bg-grey mb-3">
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>  
</div>

Flex item

Content Ordering

Change the visual order of specific flex items using the classes: .order-first , .order-last and .flex-unordered classes.

These classes are also responsive: .flex-BREAKPOINT-first , .flex-BREAKPOINT-last and .flex-BREAKPOINT-unordered so you can control content order per breakpoint.

View code example

<div class="d-flex flex-nowrap bg-grey">
  <div class="order-last p-2 m-2 bg-light">First flex item</div>
  <div class="p-2 m-2 bg-light">Second flex item</div>
  <div class="order-first p-2 m-2 bg-light">Third flex item</div>
</div>

First flex item

Second flex item

Third flex item

Align Content

If you flex content flows over multiple lines/row you can use the .align-content classes to control the vertical distribution of elements.

.align-content-start and align-content-BREAKPOINT-start :
aligns columns to the top ("start").
.align-content-end and align-content-BREAKPOINT-end :
aligns columns to the bottom ("end").
.align-content-center and align-content-BREAKPOINT-center :
aligns columns to the middle ("center").
.align-content-stretch and align-content-BREAKPOINT-stretch :
stretches column to the full height of their row container.

View code example

<!-- .align-content-start - align top -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-start" style="height: 15rem;">
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>  
</div>

<!-- .align-content-end - align bottom -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-end" style="height: 15rem;">
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>  
</div>

<!-- .align-content-center - align center -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-center" style="height: 15rem;">
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>  
</div>

<!-- .align-content-between - align top & bottom -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-between" style="height: 15rem;">
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>  
</div>

<!-- .align-content-around - vertically distributed -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-around" style="height: 15rem;">
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>  
</div>

<!-- .align-content-stretch - stretch items -->
<div class="d-flex flex-wrap bg-grey mb-3 align-content-stretch" style="height: 15rem;">
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>  
</div>

Flex item

Fill

Use the .flex-fill class on a series of sibling elements to force them into equal widths while taking up all available horizontal space.

This is also responsive: .flex-fill , .flex-sm-fill , .flex-md-fill , .flex-lg-fill .flex-xl-fill

View code example


<div class="d-flex p-2 bg-grey">
  <div class="p-2 flex-fill bg-light m-2">Flex item</div>
  <div class="p-2 flex-fill bg-light m-2">Flex item</div>
  <div class="p-2 flex-fill bg-light m-2">Flex item</div>
</div>

Flex item

Grow and shrink

Use .flex-grow-* utilities to toggle a flex item's ability to grow to fill available space. In the example below, the .flex-grow-1 elements uses all available space it can, while allowing the remaining two flex items their necessary space.

View code example


<div class="d-flex p-2 bg-grey">
  <div class="p-2 flex-grow-1 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Flex item</div>
  <div class="p-2 bg-light m-2">Third flex item</div>
</div>

Flex item

Third flex item

Use .flex-shrink-* utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with .flex-shrink-1 is forced to wrap it's contents to a new line, "shrinking" to allow more space for the previous flex item with .w-100 .

View code example


<div class="d-flex p-2 bg-grey">
  <div class="p-2 w-100 bg-light m-2">Flex item</div>
  <div class="p-2 flex-shrink-1 bg-light m-2">Flex item</div>
</div>

Flex item

Responsive variations also exist for flex-grow and 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

AppStrap.

Flexbox:

Basics

Browser Support

Enable flex behaviors

Force equal height and width

Flex content direction

Columns

Rows

Responsive Columns and Rows

Horizontal alignment AKA justify content

Vertical alignment AKA align items

Responsive alignment

Nested Flex elements

Auto margins

Content Wrapping

Content Ordering

Align Content

Fill

Grow and shrink

Awesome Features

Theme Colours

AppStrap.

Classic Homepages

Industry/Niche Homepages

Slider Revolution

Backstretch

Flexslider

Pages

Widget Hot

41 pages of elements/snippets Updated!

Fully Optimized

Free Support

Free Upgrades

99.9% Uptime

Multiuser

Plug n play

Flexbox:

Basics

Browser Support

Enable flex behaviors

Force equal height and width

Flex content direction

Columns

Rows

Responsive Columns and Rows

Horizontal alignment AKA justify content

Vertical alignment AKA align items

Responsive alignment

Nested Flex elements

Auto margins

Content Wrapping

Content Ordering

Align Content

Fill

Grow and shrink

Awesome Features

Theme Colours