Direkt zum Inhalt

What is Flexbox and why it is awesome!

 

What is Flexbox?


This is my first publication, so I’ll keep it simple. Flexbox. Is. Awesome.

Flexbox is a way to arrange elements fluidly. So, why is this important? In the world of cross-browser and device compatibility, flexbox can make our lives a little easier.

There are many different ways to arrange elements with display: flex

Rows & Columns

Here are the most common layouts you’ll see used in almost all websites — arranging content by rows & columns.

Rows

 

Flexbox container with flex-direction: row

To achieve this layout, lets dive a little deeper into the markup:

<div class="container">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
 </div>

And now for the styling:

.container {
 display: flex;
 flex-direction: row;
}
.child {
 flex: 1;
}

As you can see from the example and markup, flex-direction: row allows the child elements to stack horizontally. Furthermore, flex: 1 means that each child element will be an equal width. 100 / 3 = 33%

Columns

Similarly to rows, we can simply set flex-direction to column on the container to stack the child elements vertically.

 

Flexbox container with flex-direction: column

Horizontal & Vertical alignment

Now that we have the simple stuff out of the way, lets learn how to horizontally and vertically align elements

Horizontal:

justify-content: (flex-start|flex-end|center|space-between|space-around)

 

Flexbox container with justify-content: flex-start (default)

On default, justify-content is set to flex-start Flex-start means the beginning of the container.

On the contrary, justify-content: flex-end would set the element to the end of the container on the x-axis:

 

Flexbox container with justify-content: flex-end

So, how can we center this bad boy? No, we’re not going to use margin: 0 auto on the child. Let’s set justify-content: center on the container. This will set our child element in the center of the x-axis.

 

Flexbox container with justify-content: center

Vertical

align-items: (stretch|center|flex-start|flex-end|space-between|space-around)

align-items allows us vertically align our elements along the y-axis.

 

Flexbox container just align-items: center

With this knowledge, let’s position the element in the middle of the container with the the styling below:

.container {
 display: flex;
 justify-content: center;
 align-items: center;
}
 

Flexbox container with both justify-content: center and align-items: center

By knowing the basics above, we can dive into more complex ways of arranging our elements for our specific needs.

Flex

Let’s assume we have two child <div>’s in our container. We can set them to flex: 1 to share equal widths as shown below:

 

Child elements with flex: 1

So now you’re wondering, what if one of the child elements had flex: 2 ?

In the example below, this would mean the child was two times bigger than the smallest element in the container. Child one would be 33% and child two would be 66% of the container’s width (respectively).

 

Child one with flex: 1, child two with flex: 2

Media Queries

Let’s make some breakpoints in a demo website, there are a few solutions provided by Flexbox, such as flex-wrap, flex-shrink, but for simplicity’s sake, let’s see a real world example:

 

Setting flex-direction from column to row, depending on the device width

This was a short summary on the basics of Flexbox, as I learn more I will make another publication on more advanced solutions.

Thanks for having a read!

Über den Autor:
Garrett Vorce
Garrett Vorce
Full-Stack-Developer /

Unser jüngster Mitarbeiter Garrett kommt ursprünglich aus den Vereinigten Staaten und ist ein waschechter Full-Stack-Developer.

Wie können wir Sie unterstützen?

Kontaktieren Sie uns

Copyright © 2017 BUZZWOO! GmbH & Co. KG