Flex layout achieves fixed number of rows per line + adaptive layout

This article introduces the flex layout to achieve a fixed number of rows per line + adaptive layout, and shares it with you. The details are as follows:

Effect display

Analysis

 <div class="template" v-for="(item,templateIndex) in 7">
              <div @click="useTemplate()" v-touch:long="(e)=>touchin(groupIndex,templateIndex)">
                <img class="icon" src="../../../assets/home-page/templateIcon.png" alt />
                <div class="templateName">Template name</div>
              </div>
            </div>

// Parent box, set to:
.templateItem {
  width: 100%;
 
  text-align: center;
  display: flex;
  align-content: flex-start;
  flex-flow: row wrap;
}

//Subbox, set to:
 .template {
  flex: 0 0 25%;
  margin-bottom: 20px;
}

Parent box settings:

The sub-box arrangement method is flex-start. The sub-boxes are placed from the starting point, and line breaks are set by flex-flow. If line breaks are not set, the sub-elements will shrink in size to achieve the effect of being placed in one line.

Subbox settings:

Use flex:0 0 25% to set the placement of the child box. The flex property is an abbreviation of flex-grow, flex-shrink, and flex-basis. The default values ​​are 0, 1, and auto. Specify the number of shares of the sub-item

Disassembly explanation: flex:0 0 25% is equal to flex-grow=0 (no enlargement by default) + flex-shrink=0 (no shrinkage) + flex-basis=25% (the project occupies the main axis space)

For an initial understanding of flex layout, you can read our blog: Initial understanding of flex layout

This is the end of this article about how to use flex layout to achieve a fixed number of rows + adaptive layout. For more information about how to use flex layout to achieve a fixed number of rows + adaptive layout, 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!