Flexbox and the flex property


Maxi Blocks
Get WordPress design ideas

What is Flexbox?

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. 

Maxi Blocks
Customize WordPress design

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.

WordPress website design display
DIY WordPress design

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

  1. 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.
  2. 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.
  3. 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.
  4. Do use order to rearrange items: This can be used to change the order of flex items without changing the HTML structure.

Don’ts

  1. 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.
  2. 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.
  3. Don’t use float, clear, and vertical-align: These have no effect on a container.
  4. 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.
  5. 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.

WordPress websites demo
Find WordPress design inspiration

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

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

Flexbox’s limitations

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

Smart solutions for modern WordPress web designers

Design better sites with smart solutions built for WordPress web designers and creative teams.

HomePage-Maxi-Pils

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?

How can I debug issues on my WordPress site? 

When something breaks or behaves unexpectedly, debugging can help identify the cause. From plugin conflicts to theme errors, this WordPress debugging guide walks you through common problems and how to fix them quickly. 

Should I choose a custom WordPress site or a pre-built theme? 

While themes offer convenience, a custom-built WordPress site gives you complete control over design, performance and branding. If you’re aiming for a truly tailored result, this overview of custom WordPress websites outlines the advantages and key considerations. 

Where can I find the best WordPress designers? 

The quality of your website often comes down to the designer you choose. This list of top WordPress designers highlights experienced professionals who consistently deliver high-quality results. 

Is it worth hiring a freelance WordPress web designer? 

A freelancer can offer a flexible, cost-effective approach especially for small businesses or one-off projects. This article on hiring a freelance WordPress designer explains what to look for and how to get the most out of the collaboration. 

Which WordPress plugins are essential for a new website? 

Choosing the right plugins can dramatically improve functionality, security and performance. This roundup of essential WordPress plugins covers must-have tools for SEO, backups, forms and more. You can also review a broader list of recommended WordPress plugins for added flexibility. 

How do I start keyword research for my WordPress site? 

Keyword research helps you understand what your audience is searching for. This beginner’s guide to keyword research breaks down the steps and tools you can use to improve your content strategy. 

What are my options for WordPress website hosting? 

Reliable hosting is key to performance and uptime. Whether you’re looking for budget-friendly shared plans or high-speed managed options, this WordPress hosting guide and this overview of website hosting for WordPress explain what to consider. For a deeper look at features, these WordPress hosting options offer comparisons and recommendations. 

What is Flexbox and why does it matter in design? 

Flexbox is a CSS layout module that makes it easier to create flexible, responsive page structures. If you’re new to it, this introduction to Flexbox covers the basics. You can also dive deeper into expert tips on using Flexbox direction to build modern, adaptable layouts. 

How do I use Font Awesome on my WordPress site? 

Font Awesome lets you add scalable icons easily without relying on images. This step-by-step Font Awesome guide walks you through setup, implementation and common use cases for enhancing your site’s visuals.

Author-Kyra

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