How to horizontally center multiple elements in a CSS layout container using flexbox

This article mainly introduces in detail the method of using CSS to horizontally center multiple elements in a flexbox layout container. How to use flexbox to horizontally center multiple elements in a layout container? This article will give you the answer. Interested friends can refer to

If you want to achieve such a parent element in which the child elements are all centered

Just add styles to the parent element

The code is as follows:

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

Set to flexbox layout, the direction is vertical arrangement, and the third sentence is to center it.

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

If you want it to adjust automatically, you can add it to the style of the parent element. The above

code is as follows:

{justify-content：space-around;}

In this way, the remaining space will be automatically allocated around each element:)

At first I thought there was no need to use sass, but now I find that many css codes are still It is highly reusable

I have saved a small mixin for passing parameters for this case. It is automatically adjusted by default. You can also pass the parameter false and not adjust automatically

@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, everyone works hard together to improve their technical level.

The above is the detailed content of How to horizontally center multiple elements in a CSS layout container using flexbox. For more information, please follow other related articles on the PHP Chinese website!