一、如何使flex内的div不保持100%的宽度
<div class="black">
<div class="brown"></div>
<div class="pink"></div>
<div class="purple"></div>
</div>
<style scope lang="scss">
.black {
display: flex;
flex-direction: column;
.purple {
align-self: flex-start;
}
}
</style>
二、如何使元素不会受到缩放挤压
效果:在黑色div宽度缩小的时候,紫色div宽度不变
<div class="black">
<div class="purple"></div>
<div class="blue"></div>
</div>
<style scope lang="scss">
.black {
display: flex;
.purple {
flex-shrink: 0;
}
}
</style>
三、如何实现类似9宫格或更多格数的菜单样式
<template>
<div class="fatherMenu">
<div class="fatherMenu-title">
<span>Menu</span>
<span @click="$router.push({name: 'more'})">more-></span>
</div>
<div class="fatherMenu-content">
<ul class="children-ul">
<li class="children-ul-li" v-for="item in list" :key="item.id">
<div class="innerBox" @click="$router.push(item.appUrl)">
<img :src="item.imageUrl" />
<span>{{ item.appName }}</span>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "demoPage",
data() {
return {
list: [
{ id: 1, appUrl: '1', imageUrl: require('../../assets/logo.png'), appName: '1' },
{ id: 2, appUrl: '2', imageUrl: require('../../assets/logo.png'), appName: '2' },
{ id: 3, appUrl: '3', imageUrl: require('../../assets/logo.png'), appName: '3' },
{ id: 4, appUrl: '4', imageUrl: require('../../assets/logo.png'), appName: '4' },
{ id: 5, appUrl: '5', imageUrl: require('../../assets/logo.png'), appName: '5' },
{ id: 6, appUrl: '6', imageUrl: require('../../assets/logo.png'), appName: '6' },
{ id: 7, appUrl: '7', imageUrl: require('../../assets/logo.png'), appName: '7' },
{ id: 8, appUrl: '8', imageUrl: require('../../assets/logo.png'), appName: '8' },
{ id: 9, appUrl: '9', imageUrl: require('../../assets/logo.png'), appName: '9' },
]
}
}
}
</script>
<style scope lang="scss">
.fatherMenu {
margin: 100px auto 0px;
padding: 10px;
width: 800px;
border-radius: 8px;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.7);
/** height不用设置,用里面的子元素撑起来 */
&-title {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.7);
}
&-content {
width: 100%;
.children-ul {
width: 100%;
display: flex;
flex-wrap: wrap; /** 让里面的li可以换行 */
&-li {
/**
* li充当一个隐形的很规范的框架,正正方方
* 它的宽度必须均分100%,我们画9宫格就是:33.333,%,画16宫格就是:25%
*/
width: 33.333%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
.innerBox {
/**
* 这里套上一层div,目的是让用户的有效点击区域变得更精细一点,
* 因为click事件要放在这一层dom上,不能让用户点到li的间隔区域也触发click事件,
* 这样去限制之后,用户只有把鼠标放在图片和名称上,才能click点击跳转。
* 宽度根据下面的app名称长度来填写,比如4字我们就给4字的宽度,这样更精确,
* 我这里就给一个和图片一样的长度做参考。
*/
width: 50px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
> img {
width: 50px;
height: 50px;
}
> span {
font-size: 16px;
}
}
}
}
}
}
</style>
我们把这个文件放进vsCode中,就得到: