CSS Flexbox # 17. Using CSS Variables With CSS Flexbox

| Web Design

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

190924 css variables flexbox

 

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



190924 css variables flexbox 001

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.


190924 css variables flexbox 002

If you add more text on one container than on the others, the grid-like appearance will break.
190924 css variables flexbox 003

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

  • Edit the CSS code: 
.card {
height: 500px;
}


190924 css variables flexbox 004


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


About the author

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.