Flexbox on the example of the dice

What if you could build a complex css layout in minutes? Flexbox is a new layout CSS layout that makes it easy to build dynamic layouts. With the Flexbox, vertical alignment, blocks with the same height, permutation and direction becomes easier.



There is a popular myth that flex is not yet ready for use. But it is not so! 93 % of people now have a flexbox browser running . This is better than HTML5 support.
')
In this article I will guide you through the basics of flexbox using the example of creating a die. We’ll now skip some of the more advanced flexbox subtleties, such as vendor prefixes, old syntax, and browser quirks. Consider them in future lessons.

First side

The cube consists of six faces (sides). Each face has a number of points (points) that determine the value of the side. The first side consists of one point in the center.

Let's start with HTML.

<div class="first-face"> <span class="pip"></span> </div> 

To make life a little easier, I added basic styles for sides and points. Here's what happened:



First you need to tell the browser that

  .firtst-face 

this is a flexbox container

 .first-face { display: flex; } 

Nothing has changed in appearance, but much has changed under the hood.



Now

.first-face

has a major axis horizontally. The main axis can be either vertical or horizontal, but by default it is horizontal. If we added another point to the side, it would be displayed to the right of the first one. The container also has a vertical axis. The secondary axis is always perpendicular to the main axis.

Property

justify-content

defines the alignment along the main axis. Since we want the point to be centered relative to the main axis, we will use the value

center

 .first-face { display: flex; justify-content: center; } 

Since the main axis is horizontal, the point is now centered on the parent element.

Properties

align-items

determines how elements are arranged along the horizontal axis. After all, we want the point to be located in the center along this axis, we will use the value

center

, as earlier.

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

That's right, the point is now in the center!

Moving on

On the second face of the cube, the first one is exactly in the upper left corner, and the second is in the lower right. It's pretty easy to do using flexbox.

And again, let's start with markup and basic css:

 <div class="second-face"> <span class="pip"></span> <span class="pip"></span> </div> 

 .second-face { display: flex; } 

Now we have two points next to each other. This time, however, we want the points to be located on opposite sides of the face. There are special value for

justify-content

which will allow us to do this:

space-between

.

Property

space-between

evenly fills the space between flex elements. Since there are only two points, it pushes them away from each other.

 .second-face { display: flex; justify-content: space-between; } 

This is where we ran into a problem. Unlike the previous case, we cannot use

align-items

because it will affect both points. Fortunately, flexbox includes

align-self

. This property allows you to align the individual elements of the Flex-container along the transverse axis exactly what we wanted! The value we want to set for this property is

flex-end

.

 .second-face { display: flex; justify-content: space-between; } .second-face .pip:nth-of-type(2) { align-self: flex-end; } 

Looks nice!

Horizontal and Vertical Investments

Let's skip the third side and move on to the fourth. It is a bit more complicated than the others, because we have to support two columns, each with two points.

There are two things in flexbox that will save us: Flex containers can have content vertically and horizontally, and Flex containers can be nested.

From now on, our markup will include columns.

 <div class="fourth-face"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> 

Since we want the two columns to be on opposite sides of the barricades, let's move and use

justify-content: space-between

as we did before.

 .fourth-face { display: flex; justify-content: space-between; } 

Next, we need to make the columns become flexbox containers. It may seem that they are already, but remember that we have not yet installed display: flex. We can use the property

flex-direction

to set the direction of the main axis of the column.

 .fourth-face { display: flex; justify-content: space-between; } .fourth-face .column { display: flex; flex-direction: column; } 

Nothing has changed in appearance, but the columns are now flex containers. Noticed how we stuck the flex container directly into the inside of the other flex container? This is normal! flexbox doesn't care if containers are nested.

The final step is the space between points inside the columns. Since the main axis is vertical, we can again use

justify-content

.

 .fourth-face { display: flex; justify-content: space-between; } .fourth-face .column { display: flex; flex-direction: column; justify-content: space-between; } 

Conclusion

We have created 3 facets, and this knowledge should be enough to make 3 more.

Link to the original article