Written by Andrei MoraruSep 10, 2020

Online learning helps individuals become self-didacts, going against the pedagogy of most traditional educational systems. It offers the chance to have great results for lower costs and sometimes for no costs at all (take as an example the series of courses "Learning CSS with Less" that Andrei, a member of our community created and which he shares with us all). Despite these, online learning has many other advantages. Education may have several purposes, and online courses help to fulfill it. Some even say that e-learning can revolutionize education as it provides new opportunities for traditional learning. 

Aligned with this vision, a new part of this series comes to you - this time the main theme we focus on is "The flexbox model explained". 

Note: You can find the other chapters of the course in the Tech section of our blog - here.

  1. Topics of discussion
  2. Flexbox explained

1. Topics of discussion

In this tutorial, we are going to take a look at what is known as flex display or flexbox. So, let's have some fun.

2. Flexbox explained

Flexbox is a sort of module in CSS, containing a bunch of properties, that allows for a more efficient way of displaying elements inside a container, even when the dimensions of those.elements are unknown. Basically, it provides a way to position elements dynamically, regardless of their size.

This display model requires you to use a container element, usually a div, that sets its display property to the flex or inline-flex values. The child elements of that div will then be arranged inside of their parent container based on other properties. And trust me, there are a lot of them.

Before we go into properties though, we need to talk about some technical terms and aspects regarding this display model. And for that, we need to take a look at my amazing drawing skills once again:

Flexbox

As you can see, there are a lot of things in that picture. The main axis and cross axis are defined by the flex direction defined on the parent element. In the example above, we are using row as the flex-direction value, which is the default value. We'll get into more details in a minute.

The main size and cross size are also dependent on the flex direction. As you can see, for the default value, they basically refer to the width and the height of the flex container. The items inside the main container may also be referred to as flex items since we will use a property on them that helps us define how much of the size is reserved for each element.

Now that we have that out of the way, let's check out some CSS properties related to flexbox. We're going to start off with the properties associated to the parent element:

Note that there are also two keywords here, safe and unsafe that can be added after each value mentioned above, starting form justify-content. If you use safe, it means that the browser will make sure to render elements so that none of them become inaccesible (in other words, you may be unable to scroll to an element) due to too much stretching. Using unsafe will basically tell the browser to apply all the rules you have defined, regardless of the outcome.

Too much information? Don't worry, we only have 10 zillion more properties to go through. As I have mentioned, the ones above are used on the parent container. It's now time to look at the properties which we can use on the flex items which will be placed inside the parent flex container:

Here are some code examples to get you started. First off, the HTML:

  
    
    
Item 1
Item 2
Item 3
  

And here is the CSS code:

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: stretch;
  align-content: center;
  .flex-item {
    border: 1px solid black;
    padding: 20px;
    flex: 1 1 auto;
    max-width: 200px;
  }
}

Don't forget, this is Less CSS, which needs to be compiled. I am putting this as a reminder from time to time if there are some people stumbling upon this website in search for solutions.

And yeah, that about covers it for this tutorial. Flexbox is a really powerful tool for CSS display issues, so make sure you play around with these until you get the hang of it. In the next tutorial, we are going to take a look at the difference between pixel and percentage values and relative values such as the ones measured in rem. See you then.

Interested in finding out more about the author? Andrei's world is just a click away!

Interested in working with a team of expert remote developers? Contact us TODAY!