Overview
Below is flexbox example markup. You could apply flexbox CSS properties manually, but things can get cumbersome when you are trying to apply responsive functionality. The benefit of using Bootstrap 4 flexbox utility classes is that you can set flexbox properties and target specific breakpoints.
<div class="flex-container">
<div class="flex-item-a">flex item with a class .flex-item-a</div>
<div>flex item</div>
<div>flex item</div>
</div>
The table below compares vanilla CSS flexbox to Bootstrap 4 flexbox utility classes to help you decide which approach is best for your situation.
Flex container
- Flex layout gives the container the ability to alter its items' width/height (and order) to best fill the available space of the container.
- The container has a main axis and cross axis which depends on the flex direction. Each axis has a start and end. For example, if you set the flex direction to column. The main axis is vertical and the cross axis is horizontal. If you set the flex direction to row, the main axis is horizontal and the cross axis is vertical.
Step 1: Do you want the container to behave like a block or inline element?The containers can act like block or inline elements. If you change this to |
|
|
CSS Flexbox
display: read docs
|
Bootstrap Flex Classes
Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs
|
Step 2: Do you want your main axis to be vertical or horizontal? |
|
|
CSS Flexbox
flex-direction: read docs
|
Bootstrap Flex Classes
Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs
|
Step 3: How do you want the extra space to be distributed along the main axis? |
|
|
CSS Flexbox
justify-content: read docs
|
Bootstrap Flex Classes
Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs
|
Step 4: How do you want the extra space of LINES of items to be distributed along the cross axis? |
|
|
CSS Flexbox
align-content: read docs
|
Bootstrap Flex Classes
Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs
|
Step 5: How do you want the extra space between items to be distributed along the cross axis? |
|
|
CSS Flexbox
align-items: read docs
|
Bootstrap Flex Classes
Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs
|
Step 6: Do you want the items to wrap if they don't fit on one line?By default, flex items will try to fit all the items onto one line. |
|
|
CSS Flexbox
flex-wrap: read docs
|
Bootstrap Flex Classes
Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs
|
Shorthand propertyThis is a shorthand property that sets the |
|
|
CSS Flexbox
flex-flow: read docs
|
Bootstrap Flex Classes
Since Bootstrap uses classes there is no shorthand property available |
Flex Item
Do you want to override the parent settings and give a specific item their own unique settings? You will first need to write a custom class and add it to the item you would like to modify.
- Flexbox items follow the orders given by their container.
- By default, flex items all want to appear on the same line
- Individual flexbox items can be targeted with a unique class and property to override the orders given by their container. The example below uses the class
.flex-item-ato make adjustments to only flex-item-a .
Example:
HTML
<div class="flex-container">
<div class="flex-item-a">.flex-item-a</div>
<div class="flex-item-b">.flex-item-b</div>
<div class="flex-item-c">.flex-item-c</div>
</div>
CSS
.flex-item-a {
order: 3;
font-weight: bold;
}
Result
Step 1: Do you want to change the order of this item relative to the other items? |
|
|
CSS Flexbox
order: read docs
|
Bootstrap Flex Classes
Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs
|
Step 2: Do you want to have this item take up more space than the other items? |
|
|
CSS Flexbox
flex-grow: read docs
|
Bootstrap Flex Classes
No classes available
|
Step 3: Do you want this item to take less space than the other items? |
|
|
CSS Flexbox
flex-shrink: read docs
|
Bootstrap Flex Classes
No classes available
|
Step 4: Do you want to set the default size of this item before the other item sizes are set? |
|
|
CSS Flexbox
flex-basis: read docs
|
Bootstrap Flex Classes
No classes available
|
Step 5: Do you want to override the align-items value for this item? |
|
|
CSS Flexbox
align-self: read docs
|
Bootstrap Flex Classes
Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs
|
Shorthand propertyThis is the shorthand for flex-grow, flex-shrink and flex-basis combined. |
|
|
CSS Flexbox
flex: read docs
|
Bootstrap Flex Classes
Since Bootstrap uses classes there is no shorthand property available
|
What is HubSpot?
Learn how HubSpot CRM software can help your business grow.
CRM + CMS + Sales Pipeline Software
Learn More
Other cheat sheets available: NEW! Bootstrap 5 Cheat Sheet | Bootstrap 3 Cheat Sheet | Flexbox Cheat Sheet | CSS Cheat Sheet | Bootstrap Icons Cheat Sheet | More Resources