Flex layout Talk and examples

Archimedes once said give me a fulcrum I can pry the Earth, and have flex basically can pry all the layout.

1.flex Layout Basic introduction and Effect display

工欲善其事 its prerequisite, come, together to see the basic knowledge first (ah ~, old, but useful AH).

**flex-direction

direction (direction), the layout direction, as the name implies is to set the order of elements. Line up, nothing more than horizontal row and vertical row, guessed it. (Praise You)

Imagine Ha, now there is a class teacher (parent element) to organize students (child elements) to jump the third set of pupils calisthenics.

We set the direction from low to high by default.

All right, line up. The head teacher said from low to high station a horizontal: Felx-direction:row

Like this:

Standing at the end of the ranks of the 1.2-meter class teacher felt a great pear, so, he brainwave: from high to Low row Felx-direction:row-reverse

You guessed it, just the opposite of the first order (wit You)

Class teacher like the smallest of the children in the class, but the horizontal words can not see her ...

So he ordered everyone to stand down from low to High: Flex-direction:column

Well, that's probably the case, but the first row of girls says the Sun's going to go back.

The class teacher then let the students vertical from high to low row: Flex-direction:column-reverse

Line up, start jumping, March ...

**flex-wrap

Finally jumped, the class teacher sharp-eyed found a boy wearing slippers, this how can, simply class flow red flag does not protect the rhythm

"Take the slippers and throw them away", the slippers boy paper had to go out of the team. The nearest rubbish bin is two km outside the school (exaggeration, meaning far)

Slipper man away, the team is not neat, the leader to come to see

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

。。。。 Not to be continued

Flex layout Talk and examples