The scene is introduced

The parent element has an unfixed number of child elements. When the sum of the width of the child elements is less than the parent element, the child elements evenly distribute the width of the parent element. When the sum of the widths of the child elements is greater than the parent element, the child element has the minimum width, as shown by the scroll bar.

1. The child element is smaller than the parent element, leaving space above, below, left, and right 2. The child element is wider than the parent element, with white space above, below, left, and right

Error to achieve

<div class="box">
  <div class="con1"></div>
  <div class="con1"></div>
  <div class="con1"></div>
  <div class="con1"></div>
  <div class="con1"></div>
</div>
.box {
  width: 500px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  display: flex;
  overflow: auto;
  box-sizing: border-box;
}
.con1 {
  flex: 1;
  min-width: 100px;
  height: 80px;
  border: 1px solid red;
}
Copy the code

When the sum of the widths of the child elements is greater than that of the parent element, the upper, lower, left, and right elements are left blank

Correct implementation

Method 1: Add one more layer of wrapping elements

<div class="box method-one"> <div class="content"> <div class="con1"></div> <div class="con1"></div> <div Class = "con1" > < / div > < div class = "con1" > < / div > < div class = "con1" > < / div > < / div > < / div > additional style / * * /. Method - one {padding: 0; } .content { flex: 1; display: flex; padding: 20px; }Copy the code

Method 2: Add a placeholder element of width 20 to the after pseudo-element

<div class="box method-two"> <div class="con1"></div> <div class="con1"></div> <div class="con1"></div> <div Class = "con1" > < / div > < div class = "con1" > < / div > < / div > additional style / * * /. Method - two {padding - right: 0; } .method-two::after { content: ''; width: 20px; flex-shrink: 0; }Copy the code

The code in this article corresponds to demo

Look like simple problem is not simple however, aoli force gives!! If there is a wrong place or a good way to achieve, welcome to correct oh!