Flexbox and the flex property
Try MaxiBlocks for free with 500+ library assets including basic templates. No account required. Free WordPress page builder, theme and updates included.
Updated 15th May 2025
What is Flexbox?
Before taking the plunge into CSS, it’s important to understand its tools and basics. Flex is gaining traction and you’ll soon see why it’s useful for web design.
CSS has been instrumental in shaping the internet, but is not without drawbacks. As designs grew more complex, traditional CSS revealed its limitations: convoluted code, inconsistent browser behaviour, and other problems. To understand why Flex is essential for web design, it’s important to first learn its tools and basics. Less JavaScript and more CSS.
Welcoming Flex: a new era in CSS
Flex introduces a powerful layout model that simplifies complex designs. You can control the alignment, direction, order, and size of elements in a container, revolutionising CSS.
Deciphering the concept of Flex container and Flex items
A flex container in HTML is an element designated with a display value of either flex or inline-flex. This element’s immediate children are transformed into items. The layout of these flex items can be managed using properties specific to the container, including flex-direction, flex-wrap, justify-content, align-items, and align-content.
Properties for the Parent (Flex Container)
- display: This is used to define a container. It can take the following values: flex or inline-flex.
- flex-direction: This determines the direction of the main axis, thus defining the direction items are placed in the container. It can take the following values: row, row-reverse, column, column-reverse.
- flex-wrap: This determines whether items are forced onto one line or can wrap onto multiple lines. It can take the following values: nowrap, wrap, wrap-reverse.
- flex-flow: This is a shorthand for flex-direction and flex-wrap.
- justify-content: This aligns items along the main axis of the current line of the container. It can take the following values: flex-start, flex-end, center, space-between, space-around, space-evenly.
- align-items: This defines the default behavior for how flex items are laid out along the cross axis. It can take the following values: stretch, flex-start, flex-end, center, baseline.
- align-content: This aligns a container’s lines within the container when there is extra space on the cross-axis. It can take the following values: stretch, flex-start, flex-end, center, space-between, space-around.
Properties for the Children (Flex Items)
- order: This specifies the order of a item relative to the rest of the items inside the same container.
- flex-grow: This specifies how much a property item will grow relative to the rest of the items.
- flex-shrink: This specifies how much a item will shrink relative to the rest of the items.
- flex-basis: This specifies the initial main size of a flex item.
- flex: This is a shorthand.
- align-self: This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. It can take the following values: auto, flex-start, flex-end, center, baseline, stretch
Dealing with cross-browser compatibility
It is very well supported across modern browsers, however, there are a few issues that you might run into. For example, IE9- doesn’t support it at all, while IE10 supports the 2011 version. Safari was the last of the major browsers to remove prefixes, with the release of Safari 9 in 2015.
If you are trying to ensure backward compatibility with old versions of browsers, and in particular IE10 and 11, the Flexbugs site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed which can save you many hours of puzzling.
To cover all implementations, you can include vendor prefixes in your CSS in addition to the unprefixed version. For example, to create a container with a row direction, your CSS would look like this:
.foo {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
Note that specifying `flex-direction: row` is not necessary unless you’re overriding a previous `flex-direction` declaration, as `row` is the default direction.
Subscribe to our newsletter
Handling Flex basis and min-width conflicts
The flex-basis CSS property sets the initial main size of a item. It sets the size of the content box unless otherwise set with box-sizing. However, flex-basis will still obey any min-width or min-height settings.
If you set flex-basis to 0, the width of the item wouldn’t become 0, but rather its minimum content width. You can change flex-basis to other small values, but the final width will still be the minimum content width.
Lets look at some real-world samples
Step 1: Setting up a Flex container
To get started with it, you first need to define a container. You can do this by setting the `display` an element to “flex” or “inline-flex”.
.container {
display: flex;
}
Step 2: Understanding Flex direction
By default, the items are laid out in the same direction as the text direction, known as the `row` direction. However, the `flex-direction` can be used to change this:
.container {
display: flex;
flex-direction: column;
}
Step 3: Justifying Content
The `justify-content` property is used to align the flex items along the main axis of the flex container. It can take five different values: `flex-start`, `flex-end`, `center`, `space-between`, and `space-around`.
.container {
display: flex;
justify-content: space-between;
}
Step 4: Aligning items
The `align-items` property is used to align flex items along the cross axis. It can take five different values: `stretch`, `flex-start`, `flex-end`, `center`, and `baseline`.
.container {
display: flex;
align-items: center;
}
Step 5: Flex wrap
By default, flex items will all try to fit onto one line. You can change this with the `flex-wrap` property.
.container {
display: flex;
flex-wrap: wrap;
}
Step 6: Flex shorthand
The attribute in CSS combines the functionalities of flex-grow, flex-shrink, and flex-basis. By default, it’s set to 0 1 auto, indicating that the item won’t expand, is able to contract, and initially assumes an automatic size.
.item {
flex: 1 0 auto;
}
Step 7: Order
The `order` can be used to change the order of the flex items. Its default value is `0`.
.item {
order: 1;
}
It has many more properties and capabilities that you can explore. I recommend checking out the CSS guide on MDN for more in-depth information.
Let’s dig deeper
Step 1: Flex-grow and Flex-shrink
The `flex-grow` and `flex-shrink` properties control how much a item will grow or shrink relative to the rest of the items in the container when free space is distributed.
.item {
flex-grow: 1;
flex-shrink: 2;
}
In this example, the flex item will grow and take up any extra space if available and will shrink at twice the rate of other items in the container when the space is reduced.
Step 2: Flex-basis
The `flex-basis` this sets the initial main size of the flex item. It can be set to any length value, or to `auto`.
.item {
flex-basis: 20%;
}
In this example, the initial size of the item will be 20% of the container.
Step 3: Align-self
The `align-self` this allows you to override the `align-items` value for individual flex property items.
.item {
align-self: flex-start;
}
In this example, this particular item will be aligned at the start of the cross axis, regardless of the `align-items` setting on the container.
Step 4: Flex-flow
The `flex-flow` this is a shorthand for `flex-direction` and `flex-wrap`.
.container {
flex-flow: row wrap;
}
In this example, the flex property items are laid out in a row and will wrap onto multiple lines.
Step 5: Using calc() with Flexbox
The `calc()` function can be used in conjunction with Flexbox to create more dynamic layouts.
.item {
flex: 1 0 calc(25% - 20px);
}
In this example, each item will take up 25% of the container width minus 20px.
Step 6: Nested Flex containers
Flex containers can be nested inside each other to create complex layouts.
.container {
display: flex;
}
.container .item {
display: flex;
}
In this example, each item in the container is also a flex property container.
Step 7: Using Flexbox with media queries
Flexbox can be used in conjunction with media queries to create responsive layouts.
.container {
display: flex;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
In this example, the flex items are laid out in a row by default, but will stack vertically on screens smaller than 600px.
Let’s create a simple project. We’ll create a responsive navigation bar.
Step 1: HTML structure
First, let’s create the HTML structure for our navigation bar.
<nav class="navbar">
<div class="nav-logo">Logo</div>
<ul class="nav-items">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
Step 2: Basic CSS
Next, let’s add some basic CSS to style our navigation bar.
.navbar {
background-color: #333;
color: #fff;
padding: 10px;
}
.nav-logo {
font-size: 24px;
font-weight: bold;
}
.nav-items {
list-style: none;
padding: 0;
}
.nav-item {
cursor: pointer;
}
Step 3: Applying Flexbox
Now, let’s use it to layout our navigation bar.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-items {
display: flex;
}
.nav-item {
margin-left: 20px;
}
With these styles, our logo and navigation items are aligned horizontally with space between them. The navigation items are also aligned horizontally.
Step 4: Making it responsive
Finally, let’s use a media query to stack the logo and navigation items vertically on smaller screens.
@media (max-width: 600px) {
.navbar {
flex-direction: column;
}
.nav-items {
justify-content: center;
margin-top: 10px;
}
.nav-item {
margin-left: 0;
margin-bottom: 10px;
}
}
And there you have it, a responsive navigation bar! This is a simple example, but it demonstrates the power of it for creating dynamic, responsive layouts. You can expand on this example by adding more complex elements to the navigation bar, such as dropdown menus or a search bar.
Build like a pro
Dos and don’ts
Dos
- Do use it for small-scale layouts: It is great for aligning elements and distributing space within a container. It’s perfect for components like navigation bars, headers, footers, or small sections of a webpage.
- Do use it: 1 to make a item flexible: This is shorthand for flex-grow: 1, flex-shrink: 1, and flex-basis: 0. It allows the item to grow and shrink to fill the container.
- Do use flex-wrap: wrap for multi-line flex containers: This allows flex items to wrap onto multiple lines, which is useful for responsive design.
- Do use align-items, justify-content, and align-content: These are powerful tools for aligning flex items along both the main axis and the cross axis.
- Do use order to rearrange items: This can be used to change the order of flex items without changing the HTML structure.
Don’ts
- Don’t use it for large-scale layouts: While it is great for small-scale layouts, CSS Grid is a better choice for large-scale layouts that require complex two-dimensional arrangements.
- Don’t forget about browser compatibility: While it is supported in all modern browsers, there may be some inconsistencies in older browsers. Always test your layout in multiple browsers to ensure compatibility.
- Don’t use float, clear, and vertical-align: These have no effect on a container.
- Don’t forget to use vendor prefixes if necessary: While most modern browsers support Flexbox, some older versions require vendor prefixes. You can use a tool like Autoprefixer to automatically add these for you.
- Don’t ignore the flex-shrink: By default, flex items can shrink to fit the container, which can lead to unexpected results. You can control this behavior with the flex-shrink property.
Remember, the best way to get comfortable with it is to practice.
Final thoughts on Flexbox and the flex property
Flexbox is one of the most powerful layout systems available in CSS. It simplifies the process of designing flexible, responsive layouts without needing to rely on floats or positioning. While Flexbox is not new, its ability to adjust elements dynamically to fit various screen sizes has made it an essential tool for web developers.
Why Flexbox makes a difference
The core benefit of Flexbox is that it enables you to design layouts where the content can grow or shrink depending on the screen size or the amount of space available. The flex property within Flexbox allows items to adjust proportionally, creating more flexible and consistent layouts. This makes it much easier to build web pages that work well on both small mobile screens and large desktop monitors.
When used correctly, Flexbox allows you to avoid complex grid systems or reliance on absolute positioning, which often causes issues with responsiveness. This property helps you structure your content neatly and efficiently, especially in modern design workflows. Whether you’re building a header with navigation links or arranging a grid of cards, Flexbox ensures your design will stay consistent across devices.
Flexbox and responsive design
One of Flexbox’s strongest points is its seamless integration with responsive web design. It makes creating layouts that adapt to different screen sizes much simpler. You can set the width of elements to be flexible, so they resize automatically based on the available space. This eliminates the need for many media queries and complex calculations that might otherwise be necessary to make designs fit various screens.
If you’re looking to use Flexbox without getting lost in code, tools like MaxiBlocks can help. With MaxiBlocks, you can quickly implement a responsive design using pre-built blocks and patterns that leverage Flexbox principles, allowing you to create a clean, modern website without the need for complicated CSS. The plugin offers powerful design options that ensure your site looks good on all devices, giving you more control over your layout without having to write extensive custom code.
Flexbox’s limitations
While Flexbox is a fantastic tool for many layout scenarios, it’s not always the best choice for every situation. For example, if you need a complex, two-dimensional grid system, CSS Grid might be a better option. Flexbox is more suited to one-dimensional layouts, where you’re arranging items either in rows or columns. But, for most everyday web design tasks, Flexbox provides the flexibility and ease of use that most developers need.
When using Flexbox, it’s important to test across different browsers and devices to ensure compatibility. Most modern browsers support it, but older versions may have limited functionality. This is where tools like MaxiBlocks can be handy, as they are optimised for flexibility, making it easier to avoid layout issues.
Conclusion
Flexbox, particularly the flex property, is a game-changer for web development, making it far easier to create dynamic, responsive layouts. While it’s essential to understand its strengths and limitations, it’s a tool that can simplify a lot of your design work. For those looking to integrate these principles into WordPress design, using a tool like MaxiBlocks can streamline the process and give you access to beautifully designed blocks that adapt well across devices, all without writing complex code.
Smart solutions for modern WordPress web designers
Design better sites with smart solutions built for WordPress web designers and creative teams.
FAQs – Flexbox and the flex property
What is Flexbox in CSS?
Flexbox is a layout model in CSS that helps in creating flexible and responsive layouts. It allows you to design layouts more easily by distributing space along rows or columns, making it simpler to align and adjust the space between items within a container.
How does Flexbox work?
Flexbox works by defining a container as a “flex container” and its children as “flex items”. The layout of the items within the container is controlled by the flexbox model, allowing you to arrange the items in a flexible manner without needing complex CSS tricks.
What is the flex property in Flexbox?
The flex property is a shorthand in Flexbox that combines three properties: flex-grow, flex-shrink, and flex-basis. It defines how a flex item should grow, shrink, or occupy space in the container, depending on the available space and the other items around it.
What does flex-grow do?
The flex-grow property determines how much a flex item will grow relative to the other items in the container. If there is extra space available, flex-grow will decide how much more space each item should take.
What is flex-shrink?
The flex-shrink property controls how much a flex item will shrink when there is less space in the container. It allows the item to shrink proportionally to other items, ensuring they all fit in the container.
How does flex-basis work?
Flex-basis sets the initial size of a flex item before any growing or shrinking happens. It allows you to specify a starting size for the item, whether in fixed units like pixels or percentage-based values.
How does Flexbox differ from CSS Grid?
Flexbox is one-dimensional, meaning it works on layouts arranged either in rows or columns. CSS Grid, on the other hand, is two-dimensional, allowing you to control both rows and columns simultaneously, making it better suited for more complex layouts.
Can Flexbox be used for vertical alignment?
Yes, Flexbox can handle vertical alignment easily. By using the align-items property, you can center or align items vertically within their container, making it a powerful tool for both horizontal and vertical layout control.
What are the main benefits of using Flexbox?
Flexbox simplifies the process of designing flexible and responsive layouts. It enables easier alignment, distribution of space, and resizing of items within a container. Flexbox makes it possible to create complex layouts without the need for complex CSS or JavaScript solutions.
When should I use Flexbox?
You should use Flexbox for layouts that need to adjust dynamically to different screen sizes or where elements need to align and distribute space evenly within their container. It’s perfect for navigation bars, grids, and elements that need to resize based on available space.
WordPress itself
Official Website
wordpress.org – This is the official website for WordPress, where you can download the software, find documentation, and learn more about using it.
WordPress Codex
codex.wordpress.org/Main_Page – This is a comprehensive documentation resource for WordPress, covering everything from installation and configuration to specific functionality and troubleshooting.
WordPress Theme Directory
wordpress.org/themes – The official WordPress theme directory is a great place to find free and premium WordPress themes. You can browse themes by category, feature, and popularity.
maxiblocks.com/go/help-desk
maxiblocks.com/pro-library
www.youtube.com/@maxiblocks
twitter.com/maxiblocks
linkedin.com/company/maxi-blocks
github.com/orgs/maxi-blocks
wordpress.org/plugins/maxi-blocks
Kyra Pieterse
Author
Kyra is the co-founder and creative lead of MaxiBlocks, an open-source page builder for WordPress Gutenberg.
You may also like
