【vue】彈性佈局和九宮格
實現的九宮格效果：
一、使用
.box{
display: -webkit-flex; /*在webkit核心的瀏覽器上使用要加字首*/
display: flex; //將物件作為彈性伸縮盒顯示
}
二、容器屬性.box{...}
-
flex-direction:row|column //預設，主軸水平方向，起點在左端，或者主軸垂直方向，預設在上沿
-
flex-wrap:nowrap|wrap //預設不換行，當然你也可以選擇換行
-
justify-content:flex-start //主軸上的對齊方式，預設左對齊，當然還有flex-end，center等
-
align-item:stretch //單行交叉軸上的對齊方式，如果專案未設定高度或設為auto，軸線佔滿整個交叉軸，其他還有flex-start，flex-end，center等
-
align-content:stretch //多行交叉軸上的對齊方式，如果專案未設定高度或設為auto，將佔滿整個容器的高度，前提是有多行，即設定過flex-wrap，其他還有flex-start，flex-end，center等
-
flex-flow//不用記憶，相當於direction和wrap的預設簡寫
三、容器內專案屬性.item{...}
-
order:0 預設為0，可以是負值 , 數值越小，排列越靠前，
-
flex-grow:0 預設值為0，即如果空間有剩餘，也不放大。可以是小數，按比例佔據剩餘空間。若所有專案的數值都相同，等分剩餘空間
-
flex-shrink:1 預設值都為1，即如果空間不足將等比例縮小。如果有一個專案的值為0，其他專案為1，當空間不足時，該專案不縮小。負值對該屬性無效，容器不應該設定flex-wrap。
-
flex-basis:auto flex-basis是分配多餘空間之前專案佔據的主軸空間，如果空間不足則預設情況下該專案也會縮小。預設為auto，如果設定數值，設定flex-basis為350px，但空間充足，則顯示為350px,如果空間不足，則顯示小於設定值
-
flex:auto flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，預設值為0 1 auto，第一個屬性必須，後兩個屬性可選。可以flex:auto; 代替 flex: 1 1 auto;可以用 flex: none;代替 flex: 0 0 auto；
-
align-self：auto 允許單個專案與其他專案有不一樣的對齊方式 預設值為auto，表示繼承父元素的align-items屬性，並可以覆蓋align-items屬性。align-self: auto | flex-start | flex-end | center | baseline | stretch;
四、九宮格案例來了解display:flex
注意：在pc端可以使用@touchstart和@touchend，效率要比@click高，但是在手機端不能用
<div class="sudoku_row">
<div class="sudoku_item " :class="curSelect==sudoku.id?'opacity':'' "v-for="(sudoku,index) in sudokus" :key="index" @click="start(index)”>
<img :src="sudoku.img_src" width="40" height="40" >
{{sudoku.name}}
</div>
</div>
<script>
import breakfast from '../assets/logo.png';
export default {
name: 'HelloWorld',
data () {
return {
sudokus: [
{
img_src: breakfast,
name: 'Breakfast',
id:0
},
{
img_src: breakfast,
name: 'Breakfast',
id:1
},
{
img_src: breakfast,
name: 'Breakfast',
id:2
}
],
curSelect:null
}
},
methods: {
start:function(e){
console.log("點選了按鈕")
var that = this;
var list = that.sudokus;
for (var i = 0, len = list.length; i < len; ++i) {
if (list[i].id == e) {
that.curSelect = i;
console.log("======" + that.curSelect);
that.curSelect= null;
}
}
},
}
}
</script>
<style scoped>
.sudoku_row{
display: flex;
align-items: center;
width:100%;
flex-wrap: wrap;
}
.sudoku_item{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:25%;
padding-top: 10px;
padding-bottom: 10px;
}
.opacity{
opacity: 0.4;
background: #e5e5e5;
}
.sudoku_item img{
margin-bottom: 3px;
display: block;
}
</style>