About flex layout justify content: the last solution to the misalignment of space around and why it is solved like this is a discussion

About flex Layout justify-content:space-around The last solution to misalignment and why it is solved like this are discussed

• Reference article

  • @flex Layout settings space-between(around) The last line is not aligned to the left - terms of settlement
  • @[ translate ] When we are using display: flex When , What happened ？

• You may have encountered the following situations , In the layout, we have to set justify-content:space-around And the effect was originally intended to be the effect on the right of the following figure , But it shows the effect on the left

• In fact, the solution is also very simple , Add a pseudo class to the outermost layer

  html structure

      <!--  Outer layer  -->
    <div class="root">
      
      <!--  Traversing data  -->
      <div v-for="(shopItem, index) in shopList" :key="index">
        <img style="width: 200px;" :src="shopItem.url" alt="" />
      </div>
  
    </div>
  

  css terms of settlement , stay root Add a pseudo class later to solve

  .root::after{
        
      content: "";
      width: 200px;
      /*  Height cannot be provided  */
      /* height: 200px; */
  }
  

So why set ::after Pseudo classes can be solved justify-content What about the layout problem ?

• When the circular list is odd, the filling box will appear, right ?

• But if it is an even number, will this pseudo class appear ::after Filling box , Let's add another item frame
  • You can see , There is no red box ( It's not that I didn't get the screenshot , It is true that there is no red frame )

• So why ? It's like knowing that the browser knows that we need this filled content to appear
  • Before, I guessed that the box model might calculate the pseudo class ::after Width , But I remember that the box model calculates for block level elements
  • Check the information later and say

CSS Pseudo elements ::after Used to create a pseudo element , As the last child of the selected element . Usually will cooperate with content Attribute to add decorative content to the element . This virtual element defaults to an inline element .

• Then it must not be the problem of box model calculation , So why ?( Here is my personal opinion , May be wrong )
  • Later, I thought about what happened
    • 1. The last line is not filled , When there is a gap , There will be pseudo class filling
    • 2. When the container is not empty at last , There will be no pseudo class filling
• See the properties of the elastic box later , Found out flex-basis

CSS attribute flex-basis It specifies flex The initial size of the element in the principal axis direction . If not used box-sizing Change the box model , Then this attribute determines flex Content box for elements （content-box） The size of the .

flex-basis The default value is auto

• So I set up pseudo classes ::after Of flex-basis:0, See what happens ,

.root::after{
    
    content: "";
    width: 200px;
    /*  Height cannot be provided  */
    /* height: 200px; */
    background: red;
    flex-basis:0;
}

• You can see , pseudo-classes ::after There is no height , Unlike the previous line that is not full, there is padding

• We are setting it to flex-basis:auto See what happens

• Of course , Because we didn't set the width of the foundation , So set flex-basis:content The same effect

• Even set up height:auto Is the same effect

flex-basis Official explanation — Since this value was not included in the original specification , Implemented in some early browsers flex Layout ,content Invalid value , You can use settings (width or height) by auto To achieve the same effect .

summary

• The browser knows that we need this padding because flex-basis The default value is auto, The browser calculates and selects a height or width for the element , Of course , If the width and height are set in advance , that flex-basis:auto It's no use ( There is no setting here height, So just talk about height The situation of )
• So know more flex Layout ~~~