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
-
A detailed explanation of Hadoop core architecture HDFS
Knowledge Base Team
-
What Does IOT Mean
Knowledge Base Team
-
6 Optional Technologies for Data Storage
Knowledge Base Team
-
What Is Blockchain Technology
Knowledge Base Team
Explore More Special Offers
-
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