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;
}

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00