CSS is horizontally centered and limits the maximum width implementation

Time:2020-10-27

A CSS layout and style problem, how to balance the horizontal center and limit the maximum width

In recent work, I encountered a problem like this:

1. Background

  • Horizontal layout of three or two columns, and the content in one column is changeable;
  • When the content is too little, the whole needs to be displayed in the middle;
  • When the content is too much, it needs to be omitted according to the maximum width;

2. Ideas of realization

To add attributes to the whole container:


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

2.1 use flex:1 To achieve

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

2.2 set flex: none to implement

The problem is that when there is too much content, it will not cover up too much content

2.3 do not set properties

If the content in the middle is not fixed, do not set any flex property. If the setting is not enough, remember to rewrite it


.clamp {
    flex: initial;
}

Note that initial is used here, not none.

Also note that the width of other columns should not be squeezed. The column on the left originally contained an image with a set width, but the content in the middle column was too much, resulting in the image being compressed and deformed. So, a min width attribute is added to the image.

This article on the CSS horizontal center and limit the maximum width of the article introduced here, more related CSS horizontal center limit maximum width content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!