vue中实现flex弹性布局
我是一个前端的新手,对于页面布局这一块没有具体去思考过,直到最近因为公司的系统需要我负责项目的整体布局layout模块,我这才开始细细思考这一个问题。flex是很好的弹性盒子,我之前虽然有在用但是却只是简单使用垂直水平居中的属性,对于其他强大的能力一窍不通。好了废话少说,开始记录我的第一个布局吧。(默认大家都会简单使用flex了)一、先实现简单的页面<template...
我是一个前端的新手,对于页面布局这一块没有具体去思考过,直到最近因为公司的系统需要我负责项目的整体布局layout模块,我这才开始细细思考这一个问题。flex是很好的弹性盒子,我之前虽然有在用但是却只是简单使用垂直水平居中的属性,对于其他强大的能力一窍不通。好了废话少说,开始记录我的第一个布局吧。(默认大家都会简单使用flex了)
一、先实现简单的页面
<template>
<div class="box">
<div class="top">2222</div>
<div class="min">
<div class="left"></div>
<div class="item">
<div class="fill">
<div class="text">
全面建成小康社会 2012年,中国共产党第十八次全国代表大会报告提出,确保到2020年实现全面建成
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped >
.box {
height: 500px;
padding: 0 20px;
display: flex;
flex-direction: column;
background-color: #cccccc;
}
.top {
height: 50px;
width: 100%;
background-color: aqua;
}
.min {
display: flex;
align-items: center;
}
.left {
width: 150px;
height: 120px;
line-height: 30px;
background-color: orange;
}
.item {
height: 120px;
line-height: 40px;
background-color: #ff0000;
}
</style>
效果如下:
简单页面出来了左边也是150px,那右边宽度没有布满剩下的空间,这该怎么办呢?如果按照我之前的办法是直接写死右边的宽度,但是这样就没有宽度实行性可言了,因为大小固定了,浏览器窗口物流怎么改变它的大小都无法随之适应。那有没有一个好的方法来实现它自动计算剩下空间呢?
二、flex盒子 中的 flex-grow
flex-grow 属性用于设置或检索弹性盒子的扩展比率,其实就是自动计算容器中剩下的空间,然后把它自动赋给使用的元素。需要注意的是:如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。也就是说使用 flex-grow ,其父级必须使用flex弹性盒子。
那么我们来改变一下css试试,把它改为
.item {
flex-grow: 1;
height: 120px;
line-height: 40px;
background-color: #ff0000;
}
这时候我们看到的结果是:
这时候,左右两边已经布满整个页面了
三、改变浏览器视图大小看看效果如何
咦?不对啊,我们明明已经给左边设置了150px的宽度,前面的也都是这个宽度,到了这里怎么变小了而且还在不断变小,这是怎么回事呢?原来使用flex-grow的时候虽然能够自动计算剩余的空间,但是也会计算内容所需要的空间,当内容所需空间大于剩余空间时就会把其他的兄弟元素给挤压了,那这该怎么办,总不能不让人家的视图窗口改变大小吧。这时候就需要用到flex中的另一个属性flex-shrink了。
四、flex 之 flex-shrink
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。需要注意的是:如果元素不是弹性盒对象的元素,则 flex-shrink 属性不起作用。也就是说使用 flex-shrink,其父级必须使用flex弹性盒子。
那么我们来试试这个属性好不好用吧。修改一下css,改为:
.left {
flex-shrink: 0;
width: 150px;
height: 120px;
line-height: 30px;
background-color: orange;
}
效果如何:
咦?好了左边的区域还是150px大小没有改变,右边的宽度也能布满容器,这是怎么回事呢?这是因为flexs-shrink属性就是用来控制flex元素的压缩规则的,设置为0,那就是不压缩,这样在窗口大小改变的时候就不会被挤压变形了,简单的弹性布局就这样了。
更多推荐
所有评论(0)