Flex write dice layout

🫐 write in front

In interviews, we are often asked about the implementation of front-end layout. The most typical example is to use Flex to realize the layout of dice. This article will gradually introduce how to use Flex to realize the layout of various points of dice.

🍊 Review Flex layout properties

Before implementing the dice layout, let's review the properties of these flex layouts:

justify-content: used to adjust the way elements are aligned on the main axis;

align-items: used to adjust the alignment of elements on the side axis;
align-self: Set the alignment of the element itself on the side axis;
flex-direction: Defines whether the main axis is horizontal or vertical or positive and negative.
It's useless to say more, let's write the code directly

🍉 Implement a little layout

It is very simple to implement a little layout. It can be said that it is a horizontal and vertical center. It is quite easy to implement with flex layout. The implementation code is as follows:
html




css



Only the core code is posted here, and the rest of the code is just some style adjustments.

The effect is as follows:

Here we use justify-content and align-items to easily achieve a little layout of the dice.

🍋 Implement two-point layout

Now we implement the two-point layout of the dice, and the implementation code is as follows:
html




css



This is just a solution to the implementation, there are other ways to write it.

🍌 Implement three-point layout

The three-point layout is similar to the two-point layout, just add one more line. The implementation code is as follows:
html




css


The operation effect is as follows:

🍍 Implement four-point layout

The four-point layout can be said to be a variant of the two-point layout. The implementation code is as follows:
html




css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-between;
}

The operation effect is as follows:

🥭 Implement fiv

e-point layout

To implement the five-point layout, you can add a line to the four-point layout. The sample code is as follows:
html




css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-between;
}
.column:nth-child(2) {
justify-content: center;
}

The operation effect is as follows:

🥭 Implement six-point layout

To implement the six-point layout, you can add a line to the four-point layout. The sample code is as follows:
html




css
.warp {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
justify-content: space-around;
}