“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Writing in the front

In the last article, I introduced the basic flex layout grammar, and I believe that you have learned the basic Flex layout grammar. In this section, I will teach you how to use flex layout. I will teach you how to use Flex layout, and I will learn how to use Flex layout. Let’s learn about ba ~

One, the layout of dice

Dice style

Here’s the style code:

HTML: CSS:

In the above code, the div element (representing a face of the die) is the Flex container, and the span element (representing a dot) is the Flex project. If you have multiple items, add multiple SPAN elements, and so on.We can see that there are up to nine spots on the die. So there are multiple layouts: 👇

Let’s take a look at various dice layout should be how to write ba ~

Single project

The first is the case where the dot is in the upper-left corner. By default, Flex layouts are left-aligned, so one line of code is enough.

.box{
    display:flex;
}
Copy the code

Horizontal center

.box{
    display:flex;
    justify-content:center;
}
Copy the code

The top right corner

.box{
    display:flex;
    justify-content:flex-end;
}
Copy the code

Vertical center to the left

.box{
    display:flex;
    align-items:center;
}
Copy the code

Horizontal and vertical center

.box{
    display:flex;
    justify-content:center;
    align-items:center;
}
Copy the code

Vertical center and right

.box{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
Copy the code

The lower left corner

.box{
    display:flex;
    align-items:flex-end;
}
Copy the code

Middle to bottom level

.box{
    display:flex;
    justify-content:center;
    align-items:flex-end;
}
Copy the code

The lower right corner

.box{
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
}
Copy the code

Double project

.box{
    display:flex;
    justify-content:space-between;
}
Copy the code

Just change the main axis

.box{
    display:flex;
    justify-content:space-between;
}
Copy the code

.box{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
Copy the code

.box{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}
Copy the code

.box{
    display:flex;
}
.item:nth-child(2) {align-self:center;
}
Copy the code

.box{
    display:flex;
    justify-content:space-between
}
.item:nth-child(2) {align-self:flex-end;
}
Copy the code

Three projects

.box{
    display:flex;
}
.item:nth-child(2) {align-self:center;
}
.item:nth-child(3) {align-self:flex-end;
}
Copy the code

The four projects

The HTML code is as follows:

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>
Copy the code

CSS code is as follows:

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}
Copy the code

The last

This article summarizes the Flex layout in action, and gives you an in-depth understanding of how to use Flex layouts with the roll layout on dice. If this article helped you, please click on the GitHub blog github.com/skyblue309. I have other columns, welcome to read ~ Vue from giving up to getting started with JavaScript

Later further plan

  • Grid layout principle and actual combat
  • Could VW and VH layouts be the new trend?
  • Prototypes and prototype chains