es6 flex grow shrink flex布局

最新推荐文章于 2024-09-17 11:42:54 发布

腿给你干断

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量405

点赞数

分类专栏： css3 es6 文章标签： es6 前端 css3

本文链接：https://blog.csdn.net/weixin_55903841/article/details/121567682

版权

es6 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

//es6 flex-shrink flex-basis
<template>
	<view class="outbox">
		<view class="topbox">
			<view class="innerbox">
				
			</view>
			<view class="innerbox">
				
			</view>
			<view class="innerbox">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.outbox{
		height: 100vh;
		width: 100vw;
		.topbox{
			height: 20vh;
			width: 100vw;
			background-color: #0ecea6;
			display: flex;
			.innerbox{
				flex-basis: 33.3vw;
			}
			.innerbox:nth-child(1){
				flex-shrink: 1;
				background-color: red;
			}
			.innerbox:nth-child(2){
				flex-shrink: 2;
				background-color: yellow;
			}
			.innerbox:nth-child(3){
				flex-shrink: 1;
				background-color: blue;
			}
		}
	}
</style>

//es6 flex-grow
<template>
	<view class="outbox">
		<view class="topbox">
			<view class="innerbox">
				
			</view>
			<view class="innerbox">
				
			</view>
			<view class="innerbox">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.outbox{
		height: 100vh;
		width: 100vw;
		.topbox{
			height: 20vh;
			width: 100vw;
			background-color: #0ecea6;
			display: flex;
			.innerbox:nth-child(1){
				flex-grow: 1;
				background-color: red;
			}
			.innerbox:nth-child(2){
				flex-grow: 2;
				// background-color: yellow;
			}
			.innerbox:nth-child(3){
				flex-grow: 1;
				background-color: blue;
			}
		}
	}
</style>