flex合理布局☏完成每列固定不动总数+响应式合理

2020-11-04 09:48 jianzhan

文中详细介绍了flex合理布局完成每列固定不动总数+响应式合理布局,共享给大伙儿,实际以下:

实际效果展现

分析

 <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">模版名字</div>
              </div>
            </div>
//父小盒子,设定为:
.templateItem {
  width: 100%;
 
  text-align: center;
  display: flex;
  align-content: flex-start;
  flex-flow: row wrap;
}

//子小盒子,设定为:
 .template {
  flex: 0 0 25%;
  margin-bottom: 20px;
}

父小盒子设定:

  子小盒子排序方法为flex-start,从起止点刚开始置放子小盒子,根据flex-flow设定换行,假如不设定换行,那麼子原素会变小自声以做到放到一行的实际效果。

子小盒子设定:

  根据flex:0 0 25%,设定子小盒子的占位性病变,flex特性是flex-grow,flex-shrink,flex-basis的缩写,默认设置数值0,1,auto。指出子项目目占的份数

  拆卸表明:flex:0 0 25% 相当于flex-grow=0(默认设置没放大)+flex-shrink=0(不变小)+flex-basis=25%( 新项目占有主轴的室内空间)


 

有关flex合理布局的初掌握能看咱的blog:flex合理布局初了断

到此这篇有关flex合理布局完成每列固定不动总数+响应式合理布局的文章内容就详细介绍到这了,大量有关flex每列固定不动总数+响应式合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!