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.
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:
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
<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:
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:
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:
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
- CSS Flexbox #1. Creating Your First Flexbox Layout
- CSS Flexbox #2. How to Use the justify-content Property
- CSS Flexbox #3. The align-items Property
- CSS Flexbox #4. The flex-grow Property
- CSS Flexbox #5. The flex-shrink Property
- CSS Flexbox #6. The flex-basis Property
- CSS Flexbox #7. The order Property
- CSS Flexbox #8. The flex-wrap Property
- CSS Flexbox #9. The align-content Property
- CSS Flexbox #10. The flex Shorthand Property
- CSS Flexbox #11. Shorthand Default Values
- CSS Flexbox #12. The flex-flow shorthand property
- CSS Flexbox #13. Create a Navigation Menu with Flexbox
- CSS Flexbox #14. How to Build a Card Layout in Flexbox
- CSS Flexbox #15. How to Create a Megamenu With Flexbox
- CSS Flexbox #16. How to Create Column Patterns with Flexbox