Css exercise-Multi-Element horizontal center in the container-flexbox layout application, css-flexbox

Css exercise-Multi-Element horizontal center in the container-flexbox layout application, css-flexbox

The sub-elements in such a parent element are centered.

You only need to add a style to the parent element.

{Display: flex; flex-direction: column; align-items: center ;}

Set to the flexbox layout, which is arranged vertically and centered in the third sentence.

If you want to set the distance between the three child elements, set the margin-top or margin-bottom;

If you want it to be adjusted automatically, you can add the style of the parent Element

{Justify-content: space-around ;}

In this way, the remaining space will be automatically allocated to the periphery of each element :)

At first, I thought there was no need to use sass. Now I found that many css codes are still highly reusable.

In this case, even if a small mixin parameter is saved, the parameter is automatically adjusted by default. The parameter can also be set to false, not automatically adjusted.

@ Mixin multi-elements-center ($ auto: true) {display: flex; flex-direction: column; align-items: center; @ if $ auto {justify-content: space-around ;}}

Make a little progress every day. Come on :)

For more information about flexbox, refer to the blog http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html of instructor Yan? Utm_source = tuicool