BG Image maxiblocks

Flexbox and the flex property


Maxi-Blocks-flexbox8
Flexbox guide

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-flexbox7
Flexbox properties

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.

Maxi-Blocks-flexbox6
Flex basis and min-width

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;
}

Maxi-Blocks-flexbox5
Advanced flexbox tips

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.

Maxi-Blocks-flexbox4
Styling templates with flexbox

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.

Maxi-Blocks-flexbox1
Dos and don’ts

Dos and don’ts 

Dos

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Maxi-Blocks-flexbox4
Additional aspects of flexbox

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