In this article, we will look at the elastic layout along with the solution to the vertical centralization of CSS

Another good look at this theme 🤣🤣

1. Flexible layout learning

Let’s start with the concept of elastic boxes in CSS3

To achieve an elastic layout we add display:flex; Attributes –

Flexible layouts are very flexible!

And this way (more flexible)

Here are the main questions for today’s interview question

  • The context-content attribute is also used to set the alignment of child elements on the main axis

2. Classic interview questions

How to center elements vertically and horizontally?

The premise of this answer (initial code) :

As follows — parent box inside child box

    <style>
        .father{
            display: flex;
            background-color: pink;
            width: 800px;
            height: 400px;
        }
        .son{
            background-color: plum;
            width: 200px;
            height: 100px;
        }
    </style>
    <div class="father">
        <div class="son">I am a child of something like an inline block element (width and height can be set without newline)</div>
    </div>
Copy the code

After setting vertical and horizontal center in the following ways

Results the following

In brief, there are three kinds

  • Flex layout

  • Absolute positioning (add a relative positioning to the parent box if you want to restrict it to the parent box)

  • Grid Layout Table -cell layout

Let’s start by looking at how to use today’s hero of the day — Flex layout

1. Set the parent element using properties in Flex

Put only the attributes that work ~ same here

.father{
    display: flex;
    justify-content: center;/* Horizontal center */
    align-items: center;/* Vertical center */
}
Copy the code

Align -self:center; To implement the

2. Parent set flex layout child set Margin: Auto

.father{
    display:flex;
}
.son{
    margin: auto;
}
Copy the code

Margin :auto; You can only do horizontal center

The reason can be seen in this article (specifically related to the definition of auto)

Let’s take a look at two ways to use positioning to achieve results

3. Set margin for child + parent element

.father{
    position: relative;
}
.son{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
Copy the code

4. Child parent + child element is offset left up by transform

.father{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

Here I remember in the beginning to learn CSS when learning HHH recall!

Let’s look at the implementation of the other two layouts

  • grid
  • table-cell

5. The parent element sets margin: Auto with the grid layout child element

.father{
    display: grid;
}
.son{
    margin: auto;
}
Copy the code

6. The parent element is set as an inline block element using the table-cell layout child element

.father{
    display: table-cell;
    text-align: center;/* Horizontal center */
    vertical-align: middle;/* Vertical center */
}
.son{
    display: inline-block;
}
Copy the code