CSS Flexbox # 17. Using CSS Variables With CSS Flexbox

We’ve already determined that CSS Flexbox is super cool, so let’s look at mixing in another super cool CSS tool. Custom Properties (also known as CSS Variables or Cascading Variables) are entities that allow you to assign a value in one location and then simply call it as a variable everywhere else. So, changing the value in one place changes it everywhere the var() function refers to the property, no more Find and Replace needed!

Basically this is a two part operation:

You define the value of the custom CSS property (eg. –color1: #ff00ff;, –width: 25%; or –box-padding: 10px;)
You refer to this value within the var() function throughout your CSS (eg. color: var(–color1);, width: var(–width);, padding: var(–box-padding);)

So they are not really variables, but custom properties. For the sake of understanding, this tutorial will use both definitions.

You can create multiple custom property values, and use them across multiple stylesheets, using the @import rule, for example. Another use case is to apply CSS variables within media queries, to alter the layout and make it responsive.

This tutorial will explain the use of CSS variables (custom properties) with CSS Flexbox, by creating a grid-like layout.

Let’s start!

Step #1. The HTML

Open the code editor of your liking
Create an empty HTML file
Open this link and paste the code inside the file

The body contains 12 .card-container elements. Each card container has an image a title element and a brief text in it.

Step #2. The Basic Styles

Let’s suppose we need the following four-column patterns to work with:

Create a file called style.css, the file is already linked in the HTML
Add this code to the file:

/* BASIC STYLING */
.card {
  background-color: black;
  color: white;
  padding: 1em;
}

img {
  display: block;
  width: 100%;
}

Step #3. The Media Queries

The layout will have 4 different breakpoints:

screens from 0 to 449px – 1 column
screens from 450px to 768px – 2 columns
screens from 769 to 1200px – 3 columns
screens wider than 1200px – 4 columns

We need to write 4 media queries and assign a different value for the custom properties –width and –margin. You define custom properties with two dashes and a custom name.

Edit the CSS code:

@media (max-width: 449px) {
  :root {
	--width: 100%;
	--margin: 0.75em;
  }
}

@media (min-width: 450px) {
  :root {
	--width: 50%;
	--margin: 0.75em;
  }
}

@media (min-width: 769px) {
  :root {
	--width: 33%;
	--margin: 1em;
  }
}

@media (min-width: 1201px) {
  :root {
	--width: 25%;
	--margin: 1.2em;
  }
}

We have assigned a different value for the custom properties –width and –margin. You could have called the custom property –my-custom-width, for example. Since this is only the definition of the variables, this code will not do anything on your browser.

Step #4. The Flexbox Styles

Take the <header> section first. It is already a flex container (.two-columns). The name of the blog will be on the left, whereas the main menu will be on the right side of the layout. You can declare the menu container as a flex container.

Edit the CSS code:

body {
  display: flex;
  flex-wrap: wrap;
}

.card-container {
  flex: 1;
}

Step #5. Using the var() Function

There is one more Flexbox property to apply on the card container. It is necessary to set its flex-basis value so that the card containers adapt themselves to the width of the screen.

Edit he CSS code:

.card-container { flex: 1; margin: var(--margin); flex-basis: calc(var(--width) - (var(--margin)* 3 )); }
The value of the CSS margin property is equal to the value of the –margin custom property on each one of the breakpoints.

On the other side, we use the CSS calc() function to get the difference between the width of each container and 3 times its margin, so the flex-basis of the containers will always be appropriate to preserve the column structure on each breakpoint. There are two functions inside a function.



If you add more text on one container than on the others, the grid-like appearance will break.

To solve this issue, you have to set a fixed height on the card element

Edit the CSS code:

.card {
  height: 500px;
}

The variables were declared within the :root selector. This selector defines the scope of the variable, in other words, these custom variables can be used on every element of the document.

Thanks for reading!

Previous tutorials in this Flexbox series

Author

Jorge Montoya

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
View all posts

Hey Jason, that is a very old class (2013) for Drupal 7. Here's the link: https://ostraining.com/courses/how-to-use-the-rules-module-in-drupal/ sorry about that.

The link to the Rules video class takes me to a 404 page.

Thanks so much- I was stressing about how to do this. Even though this post is from 2019 it was…

Hi Steve, this is very useful since some specific plugins also create specific user roles to function their feature. the…

Great read! It’s amazing how boosting website security can also improve performance. A strong security setup not only protects your…