Flexbox and the flex property
Looking for Creative Inspiration?
⭐⭐⭐⭐⭐
Explore Over 2,000 Patterns, 164 Layouts, and 14,000+ Icons with MaxiBlocks!👇
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 essential 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.
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.
Let’s create a footer for our website using Flexbox
Step 1: HTML Structure
First, let’s create the HTML structure for our footer.
<footer class="footer">
<div class="footer-section">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel.</p>
</div>
<div class="footer-section">
<h3>Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact Us</h3>
<p>123 Main Street, Anytown, USA</p>
</div>
</footer>
Step 2: Basic CSS
Next, let’s add some basic CSS to style our footer.
.footer {
background-color: #333;
color: #fff;
padding: 20px 0;
}
.footer-section {
margin: 0 20px;
}
.footer-section h3 {
margin-bottom: 15px;
}
.footer-section p, .footer-section ul {
margin: 0;
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section li {
line-height: 1.8;
}
.footer-section a {
color: #fff;
text-decoration: none;
}
Step 3: Applying Flexbox
Now, let’s use it to layout our footer sections.
.footer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}With these styles, our footer sections are aligned horizontally with space between them. The `flex-wrap: wrap;` this ensures that the sections will wrap onto multiple lines on smaller screens.
Step 4: Making it responsive
Finally, let’s use a media query to adjust the layout of the footer sections on smaller screens.
@media (max-width: 600px) {
.footer-section {
flex: 1 0 100%;
margin: 10px 0;
}
}With these styles, each footer section will take up 100% of the width of the footer on screens smaller than 600px, effectively stacking them vertically.
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: 1to make a item flexible: This is shorthand forflex-grow: 1,flex-shrink: 1, andflex-basis: 0. It allows the item to grow and shrink to fill the container. - Do use
flex-wrap:wrapfor 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, andalign-content: These are powerful tools for aligning flex items along both the main axis and the cross axis. - Do use
orderto 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, andvertical-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 theflex-shrinkproperty.
Remember, the best way to get comfortable with it is to practice.
Frequently Asked Questions (FAQs) about Flexbox:
What is Flexbox in CSS?
Flexbox is ideal for small-scale layouts and for components that need a flexible and responsive layout. It’s perfect for aligning elements in a single row or column, and it’s great for components like navigation bars, headers, footers, or small sections of a webpage.
A Complete Guide to Flexboxon CSS-Tricks
Flexbox Froggy
Flexbox Zombies
MDN’s Flexbox Guide
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