Introduction to Flex in Web Development: Vuetify Edition

Vincent Dhennin — Mon, 11 May 2020 19:00:14 +0000

Flexbox may not be a new web development concept, yet it still remains one of the fundamental concepts developers use to craft user interfaces in 2020.
Things web developers must always keep in mind include:

Responsive design
Having a proper layout

To succeed, our biggest weapon is flexbox, as well as general grid concepts.

This tutorial will cover what flexbox is, the most used properties, and will conclude with a part of how Vuetify works with flexbox.

What is Flexbox?

The flexbox layout aims to provide a way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.

Before going further, we should understand the difference between a parent and a child element in webdev. It’s a basic concept which has a high impact when we start using flexbox.

Flexbox is not a single property - it’s a whole module which involves a lot of things.

It includes properties for the parent element, known as a flex container and for the children element known as a flex item.

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

A flex container expands items to fill available free space or shrinks them to prevent overflow.

Next, we will look into the basics about flex and the most used properties with some examples

Let’s see behind some flexbox properties and their utilities.

In my opinion, the best way to learn things is to play with them.
Flexbox playground is perfect for that! The code used to create this app is the same as you can find in the Vuetify Docs.

If you prefer textual explanation, you should have a look to CSS Tricks Flexbox guide

How does Vuetify work with flexbox?

When it comes to using Vuetify, this UI framework makes it so that you do not need to to write css flex class inside your web application. This is because Vuetify has two different ways to handle flex design.

The first one is using flex-helpers, as you can find here. It covers the basics flex properties.

The second way is to use v-row (as a flex-container) and v-col (as a flex-item).
This example is from the official Vuetify documentation:

    <v-container>
      <v-row>
       <v-col>
         <v-card
           class="pa-2"
           outlined
           tile
         >
           One of three columns
         </v-card>
       </v-col>
       <v-col>
         <v-card
           class="pa-2"
           outlined
           tile
         >
           One of three columns
         </v-card>
       </v-col>
       <v-col>
         <v-card
           class="pa-2"
           outlined
           tile
         >
           One of three columns
         </v-card>
       </v-col> 
     </v-row>
   </v-container>

v-row is a wrapper component for v-col. It utilizes flex properties to control the layout and flow of its inner columns. It uses a standard gutter of 24px. This can be reduced with the dense prop or removed completely with no-gutters.

v-col is a content holder that must be a direct child of v-row
v-row and v-col contain different props to interact with align, justify and order, offset.
You can find more information here

Now let’s play some games to understand all the basics!

You can practice your flexbox skills on the two websites listed below:

Thanks for reading this introduction post on flexbox! Stay tuned for more posts with detailed examples on this concept in the near future.

Sources:

This blog post is a part of Vuetify Beginner's Guide Series. 🐣 Each blog has been collaboratively worked on by the Vuetify Core Team. Interested in contributing a topic? ➡ Reach out to Johanna on Dev.to or in the Vuetify Community Discord.

DEV Community: Vincent Dhennin

Introduction to Flex in Web Development: Vuetify Edition

What is Flexbox?

How does Vuetify work with flexbox?