Shulou(Shulou.com)06/03 Report--

Editor to share with you css how to use flexbox layout container multi-element horizontal center, I hope you will learn something after reading this article, let's discuss it together!

If you want to implement such a parent element, all the child elements are centered.

Just add a style to the parent element

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

Set to the flexbox layout, the direction is arranged vertically, and the third sentence is to center it.

If you want to set the distance of the three child elements yourself, just set margin-top or margin-bottom

If you let it adjust automatically, you can add to the style of the parent element

{justify-content:space-around;}

In this way, the remaining space is automatically allocated to the perimeter of each element:)

At first, I didn't think it necessary to use sass, but now I find that a lot of css code is very reusable.

Even if a small mixin for passing parameters is saved for this case, it can be automatically adjusted by default, and the parameter false can also be passed without automatic adjustment.

@ mixin multi-elements-center ($auto:true) {display:flex; flex-direction:column; align-items:center; @ if $auto {justify-content:space-around;}} after reading this article, I believe you have a certain understanding of "how css uses flexbox layout containers to have a middle level of multi-elements". If you want to know more about it, welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.