flex布局實現每行固定數量+自適應布局
發(fā)布時間：2020-06-17 16:18:41 作者：番茄紅了 
我要評論
我要評論這篇文章主要介紹了flex布局實現每行固定數量+自適應布局，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
本文介紹了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布局的初了解可以看咱的博客：flex布局初了結
到此這篇關于flex布局實現每行固定數量+自適應布局的文章就介紹到這了,更多相關flex每行固定數量+自適應布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Flex布局做出自適應頁面,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-18
這篇文章主要介紹了flex布局實現左側文字溢出省略右側文字自適應的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-01
