Introduction to flex layout and instances and introduction to flex Layout

Introduction to flex layout and instances and introduction to flex Layout

Archimedes once told me that I could shake the earth with a pivot, while flex could basically shake all the la S.

 

1. Introduction to flex layout and Result Display

To do a good job, you must first sharpen your tools and come and take a look at the basic knowledge ~, Old, but useful ).

 

** Flex-direction

Direction: sets the arrangement order of elements. Queuing is nothing more than horizontal and vertical. I guess. (Praise you)

Imagine that there is a class teacher (parent element) Who wants to organize students (child elements) to jump to the third set of primary and middle school students to broadcast gymnastics.

We set the direction from low to high by default.

Okay, queuing. The class teacher said that from low to high, a horizontal row: felx-direction: row

Like this:

The one-meter-two class teacher standing at the end of the team felt that the pear was very big. so, he had the opportunity to move from high to low: felx-direction: row-reverse

As you have guessed, it is the opposite of the First Order (wit is like you)

The class teacher liked Lu, the youngest child in the class, but he could not see her in the horizontal layout...

So he ordered everyone to vertical from low to high: flex-direction: column

Well, this is probably the case, but the girl in the first row said that the sun was good and she thought about it later.

The class teacher then asked the students to stand tall and low: flex-direction: column-reverse

Arrange it, start the aerobics, and go all the way...

** Flex-wrap

Finally, the class teacher noticed that a boy was wearing slippers. How can this happen? The flow of the class was not guaranteed.

"Take the slipper and throw it." The boy had to leave. The nearest waste bin is two kilometers away from the school)

The men with slippers are gone, and the team is not neat. The leaders will check them.

Yes, it is a complement (wit is like me ).

The class teacher limits the maximum number of students in a row. If the number exceeds the limit, move to the next row and wrap the line flex-wrap: wrap.

 

This is what the principal said: we must be united, and it is shameful to wrap the lines. So, you have to squeeze together flex-wrap: no-wrap

 

Everyone has stood up again. Basically, you can go back to the classroom by listening to a few simple words from the principal. There was a storm.

The wind is blowing, justify-content: flex-start

 

Ah, the wind blows justify-content: flex-end.

Terrible. The wind blew justify-content: center from both sides.

The final wind goes from top to bottom, and justify-content: space-

There is also a method to blow the wind, justify-content: space-around.

However, the students are tired, so we can imagine that

Likewise.

In this storm, the headmaster's speech was also blown away. The headmaster cleverly said, "That's simple. Everyone will be away ..

The students returned to the classroom.

 

2. felx Application

2.1 vertical center

Before that, we can use margin: 50h_auto 0; transform: translateY (-50%) for vertical center. Of course, we can also use positioning.

But with flex, haha (in fact, I can't laugh for so long, I'm exaggerating)

You guess, how to implement it?

I guess you won't guess. Because I wrote the answer. Wit is like you

Add the display: flex; align-items: center; justify-content: center to the parent element;

Add display: inline-flex to the child element;

The effect is as follows:

 

Yes, you are wrong. Playing is so simple (it's a sin to rob the principal of his lines)

 

2.2 layout applications

The following page is an example

This page is subject to fixed head when the content in the sky-blue box slides;

You can slide the content in the dark blue on the left and the red on the right.

Let's think about it. The elements in red should be lined up in a vertical line. What do you think?

. L-flex-column {display:-webkit-box;-webkit-box-orient: vertical; display: flex; flex-flow: column; height: 100%}

Then, the child elements of the dark blue and the big red are lined up horizontally in the sky blue element. You're right.

. L-flex-row {display:-webkit-box;-webkit-box-orient: horizontal; display: flex; flex-flow: row; width: 100%}

Second, the sub-projects in the dark blue and the sub-projects in the big red seem to be lined up in a vertical line.

Finally, the dark blue and the big red part should slide freely inside and add a scroll. you have guessed it again (worship you)

. L-scroll-y {overflow: auto;-webkit-overflow-scrolling: touch ;}

For details, click "I am details ".

 

Is there a little get? If so, I would like to boast of you.

If no, then no .. O (partition _ partition) O

 

* ***** Ended ******