1. Set the problem

As we know, an interface (which is, in particular, a web interface) is made up of interface blocks themselves, and these interface blocks themselves are a pool for the smaller interface blocks attached to it. .

So on and so forth, the overall interface becomes multi-layered.

Normally, the default interface blocks will be placed in the top left corner (inside the parent block) and joined in accordance with the left-> right, top-> bottom rule.

This will never satisfy the designs and features that an interface needs. Suppose I need a decent size block, and inside there are a few small interface blocks; These people did not fill the whole land that the father divided. So you guys will headline to each other on the left, leaving a hollow area that does not fit the design aesthetic.

The layout of the blocks will not be smooth if using float, padding, margin, top or left … And it is also very confusing.

There is a very effective way to do this, the most basic is to use display: flex; Combine several properties with flexible options.

2. Use

Turn on your browser and see how simple things are before flex:

HTML:

CSS:

And this is what we get:

Now try flex:

So :

Attached to this type of flex display are the properties:

• flex-direction: allows to change 2-dimensional coordinates in blocks.
• justify-content: justify the distance between the child blocks, between the children and the parent block itself.
• align-items: aligns the position of the sub-blocks to the line created by the flex-direction axis.

2.1 Some examples of justify-content

2.1.1. Tending to the end

2.1.2. Create space on both sides (along the axis) and evenly spaced the blocks

2.1.3. Justify the distance of the blocks

2.1.4. Centered

2.2 Some examples of flex-direction

2.2.1 Vertical render axis

2.2.2 Vertical axis, vertically from the bottom up

2.2.3 Horizontal render axis, from right to left

2.3 Some examples of align-items

2.3.1 Center the square on the right axis

2.3.2 Tuck to the bottom perpendicular to the render axis

2.4 Use the mixture

The above properties are compatible with each other so we can use a combination of their options to create the desired interface.

Create fancy interfaces for beverage business web, for example, that can make hanging basket effect with align-items: flex-start; to describe the drink glass …

3. Conclusion

Very simple like that, hope is useful for backend brothers, but not strange frontend!

https://hocwebchuan.com/