CSS horizontal centering and limiting the maximum width

A CSS layout and style question: how to balance horizontal centering and limiting maximum width

In recent work, I encountered a problem like this:

1. Background

• A horizontal three-column or two-column layout, with the content in one column changing;
• When there is too little content, the whole thing needs to be displayed in the center;
• When there is too much content, it needs to be omitted according to the maximum width;

2. Implementation ideas

The overall container needs to add properties:

.container {
    display: flex;
    justify-content: center;
}

2.1 Use flex:1 to achieve

In the previous code, the column that changes is set to flex: 1 or flex: auto, but the problem is that this will take up all the remaining space in the container and will not automatically adjust according to the content;

2.2 Set flex: none to achieve

The problem with this is that when there is too much content, it will not cover the excessive content.

2.3 Not setting properties

If the content in the middle is not fixed, do not set any flex attributes. If it is not enough, remember to overwrite it:

.clamp {
    flex: initial;
}

Note that initial is used here instead of none.

Also be careful not to squeeze the width of other columns. There was originally a picture in the left column, and the width was set, but because there was too much content in the middle column, the picture was compressed and deformed. Therefore, a min-width attribute is added to the image.

This is the end of this article about how to horizontally center with CSS and limit the maximum width. For more information about how to horizontally center with CSS and limit the maximum width, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!