flexbox弹性盒布局
flex方向
1
2
3
Details
vue
<script setup>
import {ref} from 'vue';
const direction = ref('row');
</script>
<template>
<div class="flex">
<p v-for="i in 3">{{ i }}</p>
</div>
<button @click="direction = direction === 'row'? 'column' : 'row'">切换方向</button>
</template>
<style scoped>
.flex{
width: 300px;
display: flex;
flex-direction: v-bind('direction');
border:1px solid black;
box-sizing: border-box;
padding: 10px;
}
p{
width: 90px;
height: 90px;
background: salmon;
opacity: 0.8;
border-radius: 5px;
border:1px solid salmon;
margin-bottom: 10px;
text-align: center;
line-height: 90px;
color: #fff;
margin-right: 10px;
}
button{
margin-left: 10px;
padding: 10px;
background: #3c3f44;
border-radius: 4px;
color: #fff;
margin-top: 10px;
}
</style>css
flex-direction: row; /* 默认值 */
flex-direction: column; /* 垂直 */
flex-direction: row-reverse; /* 反向 */
flex-direction: column-reverse; /* 反向垂直 */换行
1
2
3
4
5
6
Details
vue
<script setup>
import {ref} from 'vue';
const warp = ref('wrap');
</script>
<template>
<div class="flex" >
<p v-for="i in 6">{{ i }}</p>
</div>
<div style="display: flex">
<button @click="warp = 'wrap' ">换行</button>
<button @click="warp = 'nowrap' ">不换行</button>
<button @click="warp = 'wrap-reverse' ">反向换行</button>
</div>
</template>
<style scoped>
.flex{
width: 330px;
height: 600px;
display: flex;
flex-wrap: v-bind('warp');
border:1px solid black;
box-sizing: border-box;
padding: 10px;
}
p{
width: 90px;
height: 90px;
background: salmon;
opacity: 0.8;
border-radius: 5px;
border:1px solid salmon;
margin-bottom: 10px;
text-align: center;
line-height: 90px;
color: #fff;
margin-right: 10px;
flex-shrink: 0;
}
button{
margin-left: 10px;
padding: 10px;
background: #3c3f44;
border-radius: 4px;
color: #fff;
margin-top: 10px;
}
</style>css
flex-wrap: nowrap; /* 不换行 */
flex-wrap: wrap; /* 默认值 */
flex-wrap: wrap-reverse; /* 反向 */主轴对齐
1
2
3
Details
vue
<script setup>
import {ref} from 'vue';
const justify = ref('flex-start');
</script>
<template>
<div class="flex" >
<p v-for="i in 3">{{ i }}</p>
</div>
<div style="display: flex">
<button @click="justify = 'flex-start' ">左对齐</button>
<button @click="justify = 'flex-end' ">右对齐</button>
<button @click="justify = 'center'">居中</button>
<button @click="justify = 'space-between'">两端对齐</button>
<button @click="justify = 'space-around'">平均分布</button>
</div>
</template>
<style scoped>
.flex{
width: 600px;
display: flex;
justify-content: v-bind('justify');
border:1px solid black;
box-sizing: border-box;
padding: 10px;
}
p{
width: 90px;
height: 90px;
background: salmon;
opacity: 0.8;
border-radius: 5px;
border:1px solid salmon;
margin-bottom: 10px;
text-align: center;
line-height: 90px;
color: #fff;
margin-right: 10px;
flex-shrink: 0;
}
button{
margin-left: 10px;
padding: 10px;
background: #3c3f44;
border-radius: 4px;
color: #fff;
margin-top: 10px;
}
</style>css
justify-content: flex-start; /* 默认值 */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中 */
justify-content: space-between; /* 两端对齐 */
justify-content: space-around; /* 平均分布 */交叉轴对齐
1
2
Details
vue
<script setup>
import {ref} from 'vue';
const align = ref('flex-start');
</script>
<template>
<div class="flex" >
<p>1</p>
<p>2</p>
</div>
<div style="display: flex;">
<button @click="align = 'flex-start' ">顶部</button>
<button @click="align = 'flex-end' ">底部</button>
<button @click="align = 'center' ">居中</button>
<button @click="align = 'stretch' ">平均</button>
</div>
</template>
<style scoped>
.flex{
width: 300px;
height: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: v-bind('align');
border:1px solid black;
box-sizing: border-box;
padding: 10px;
}
p{
width: 90px;
height: 90px;
background: salmon;
opacity: 0.8;
border-radius: 5px;
border:1px solid salmon;
text-align: center;
line-height: 90px;
color: #fff;
margin-right: 10px;
flex-shrink: 0;
}
button{
margin-left: 10px;
padding: 10px;
background: #3c3f44;
border-radius: 4px;
color: #fff;
margin-top: 10px;
}
</style>css
align-items: flex-start; /* 默认值 */
align-items: flex-end; /* 底部对齐 */
align-items: center; /* 居中 */
align-items: stretch; /* 填充 */充满剩余空间
1
2
Details
vue
<script setup>
</script>
<template>
<div class="flex" >
<p>1</p>
<p>2</p>
</div>
</template>
<style scoped>
.flex{
width: 300px;
display: flex;
flex-wrap: wrap;
border:1px solid black;
box-sizing: border-box;
padding: 10px;
}
p{
width: 90px;
height: 90px;
background: salmon;
opacity: 0.8;
border-radius: 5px;
border:1px solid salmon;
text-align: center;
line-height: 90px;
color: #fff;
margin-right: 10px;
flex-shrink: 0;
}
p:nth-child(2){
flex:1
}
</style>css
flex:1;TIP
以上就是我对于flex的基本使用，那么请大家多多指教！
综合使用：九宫格
1
2
3
4
5
6
7
8
9
Details
vue
<script setup>
import {reactive,ref} from "vue";
const fix = ref('')
const list = reactive([1,2,3,4,5,6,7,8,9])
</script>
<template>
<div class="container">
<div :class="`flex + ${fix}`" >
<div v-for="(item, index) in list" :key="index" >{{item}}</div>
</div>
<button
@click.once="list.push(10,11)"
:disabled="list.length >= 10"
:style="{cursor: list.length >= 10 ? 'not-allowed' : 'pointer'}"
>
增加两个item
</button>
<button @click.once="fix = 'fix' "
:style="{cursor: fix==='fix' ? 'not-allowed' : 'pointer'}"
>
解决这种问题
</button>
</div>
</template>
<style scoped>
.container{
display: flex;
align-items: flex-start;
}
.container > button{
margin-left: 10px;
padding: 10px;
background: #3c3f44;
border-radius: 4px;
color: #fff;
}
.flex{
width: 300px;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
border:1px solid black;
box-sizing: border-box;
padding: 10px;
}
.flex > div{
width: 90px;
height: 90px;
background: salmon;
opacity: 0.8;
border-radius: 5px;
border:1px solid salmon;
margin-bottom: 10px;
text-align: center;
line-height: 90px;
color: #fff;
}
.fix:after{
content: "";
display: block;
width: 90px;
height: 90px;
opacity: 0;
}
</style>如果你某一行数量不够，那就会出现这种问题,我的解决办法是给父元素添加一个伪元素，让它占满剩余的空间。
css
.container:after{
content: "";
display: block;
width: 90px;
height: 90px;
opacity: 0;
}随堂练习：使用flex画骰子
