CSS uses Flexbox to center multiple elements horizontally in a layout container

This article is mainly for you to detail the CSS using Flexbox layout container inside the multi-element horizontal center method, how to use the Flexbox layout multi-element horizontal center? This article for everyone to answer, interested in the small friends can refer to

You want to implement a child element in a parent element that is centered

Just add a style to the parent element

The code is as follows:

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

Set to Flexbox layout, orientation is vertical, and the third sentence is to center it.

If the distance of three child elements to set their own, set margin-top or margin-bottom just fine;

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

The code is as follows:

{justify-content:space-around;}

This allows the remaining space to be automatically assigned to the surrounding elements:)

At first I felt that there was no need to use sass, and now I find a lot of CSS code is still very reusable

For this case even save a small mixin, the default automatic adjustment, you can also pass the parameter false, do not automatically adjust

@mixin Multi-elements-center ($auto: True) {   Display:flex;   Flex-direction:column;   Align-items:center;   @if $auto {justify-content:space-around;}   }

A little progress every day, we work together to refuel, improve their technical level.