Writing in the front

Web layout, is the front end of the entry will learn, must be skilled in a technology, learn what degree is the entry? Just give you a website, you can quickly analyze the structure of the web page, and then build a model, which is the most basic requirements of the front-end web layout entry.

As a front-end beginner, I may use some traditional layout of box model (display + position + float). Many friends feel that it is troublesome and inconvenient to write some styles with this traditional layout. For example, the traditional implementation of vertical center is as follows.

The first implementation:

Originally, when the height of the outer container is not set, it will be close to the inner element, but when the upper and lower inner margins of the container are set to the same value, the vertical center is realized.

The second implementation:

Center vertically with the vertical-align attribute.

But this property is often confused by beginners, who don’t know when to use it. Sometimes elements set this property and it takes effect. It is also a problem that beginners often have the most headache. The content involved in this property is not written in one or two articles, which we do not cover much.

Third implementation:

Center the parent container vertically by using line-height, but only for single lines of text.

In fact, there are many traditional ways to achieve vertical center web layout, but so many different situations to choose is too troublesome, do we specify a way to achieve vertical center whether inline elements or block elements?

Let’s try the Flex we’re sharing today and try the vertical centering implementation as follows:

You can easily center vertically by setting these two properties in the CSS of the outer container.

The complete code implementation is as follows:

Is the second one very convenient? Align -items: center;

So today, Deer will share a new layout, it may be new to the friends who just learn the front end, but as some advanced people, this layout is often used flexibly in the project, has been loved by many developers, with the use of this layout way — Flex layout.

After reading this article, Deer will also make you fall in love with Flex layout through lively and interesting animations.

Mind mapping

1. What is Flex layout?

Flex layouts are also flexible layouts, which provide a great deal of flexibility in page layout.

We can take a container (div, span, etc.) and set its CSS display property to Flex, and we can use flex layout.

PS: Once the container has set the display: Flex layout, float, vertical-align, clear, and other properties in the traditional layout we used are completely disabled. But you can use Flex to set the layout.

2. Know the Flex layout

The code is particularly troublesome when using a traditional layout that aligns elements vertically and centers them. To better solve this problem, Flex layouts specify both horizontal and vertical directions, which makes it easier to write both horizontally and vertically.

The Flex layout sets up three positions, left, center, and right, with attributes that make it easy to position elements.

Talk about it, let’s start writing code to practice it, and open the compiler with the deer.

3. Basic container properties

3.1 the flex – direction

This property is used to adjust the orientation of layout elements, for example if you want to arrange them vertically. As follows:

flex-direction: column

flex-direction: row

The other two are arranged in opposite directions:

flex-direction: column-reverse;

flex-direction: row-reverse;

3.2 the flex – wrap

So this is a line break property, so if the element doesn’t fit in a row, we need to say, how do we wrap? No line break, line break, or line break above the first line?

(1) the nowrap non-breaking

(2) wrap a newline

(3)wrap-reverse reverses to the first line

We can easily do this with the properties above.

3.3 the justify – content

We used to center the horizontal layout in these ways:

However, Flex layouts several horizontal positions. This makes the layout of the page more flexible and changeable.

(1) Flex-start (default) : left-align

(2) Flex-end: right-align

(3) center: a center

(4) Space-between: both ends are aligned, and the intervals between projects are equal

(5) Space-around: The space on both sides of each project is equal.

3.4 the align – items

Since there is horizontal center, there is vertical center, vertical center. As we mentioned above, traditional layout is more troublesome, so let’s take a look at the power of Flex layout.

With this align-items property value, it’s easy to center vertically.

(1) Flex-start: align the starting point of the cross axis.

(2) Flex-end: align the end of the cross axis.

(3) Center: the midpoint of the cross axis is aligned.

(4) Baseline: The baseline alignment of the first line of the project.

(5) Stretch: If the height of the project is not set or auto is set, the height of the whole container will be occupied.

4. Individual element attributes in the container

Here we have properties for the outer container, and here we have properties for the elements inside the container. Let’s take a look at the most common ones one by one.

4.1 the flex – turns up

This attribute is used to define the size of an element, and its default value is 0.

If all elements in the container are set to 1, the remaining space is split equally; If one of them is set to 2, the remaining space is split proportionately.

4.2 the flex – the shrink

This attribute is used to define the scaling of elements. The default value is 1.

If all elements have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one element and 1 for all other items, the former does not shrink when space is insufficient.

4.3 the flex – basis

Based on this property, the browser calculates whether there is extra space for the spindle. The default value is auto.

4.4 the flex

The default value is 0 1 Auto.

There are also two other shortcut attributes, auto (1 1 auto) and None (0 0 auto), from which the browser calculates the relevant values.

summary

We learned Flex layout today, is not very simple, mom no longer need to worry about your layout.

The reason why I share this article, because I see in the exchange group many beginners have been using the traditional DIV layout, so simple through an article introduction, let you know that in addition to the traditional layout, there are Flex layout, grid layout, in the fast layout is the UI framework. Bootstrap, element-UI, etc.

The general framework will be used in the project development more, for beginners, or recommended to build their own layout, the above several Flex properties are commonly used, if you want to further study, please check the official documentation.

❤️ Don’t forget to leave your learning footprints.

The article + animation wrote several hours, might as well like to support it. Hee hee, you don’t like that you are very selfish, you are afraid of so good articles let others see. Just a little joke.

You can pay attention to the deer public account: “Deer animation learning programming”, background reply: “resources”. Send you a deer before self-study information and pull you into the free study group oh!

The author Info:

【 author 】 : Deer

[original public account] : Deer animation programming.

[Introduction] : I learned programming from the ground up with Lu through animation, and presented the Web front-end field, data structure and algorithm, network principle and other easy-to-understand to my friends. First set a small goal, original 1000 animation technology articles, and your friends work together to learn together! Public reply “information” to send a from zero self-study information package!

[reproduced description] : reproduced please explain the source, thank you for your cooperation! ~