Css exercises-horizontal center of multiple elements in a container-flexbox layout application-all child elements in 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