flex布局---容器内部，order属性

最新推荐文章于 2023-05-13 23:13:14 发布

是西北呀

最新推荐文章于 2023-05-13 23:13:14 发布

阅读量711

点赞数

分类专栏：前端布局文章标签： Flex布局 order属性前端开发 CSS3 组件排列

本文链接：https://blog.csdn.net/weixin_45128912/article/details/125838846

版权

前端布局专栏收录该内容

12 篇文章 0 订阅

订阅专栏

项目的属性，就是，容器里面的组件用的

    order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: <integer>;

刚开始的样子

<template>
	<view class="father">
		<view class="son">1</view>
		<view class="dauther">2</view>
		<view class="son">3</view>
		<view class="dauther">4</view>
	</view>
</template>

<script></script>

<style>
	.father{
		display: flex;
		justify-content: space-between;
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: #ff5500;
		border-radius: 5px;
	}
	.dauther{
		width: 50px;
		height: 50px;
		background-color: #5500ff;
		border-radius: 5px;
	}
	
</style>

在这里插入图片描述

<template>
	<view class="father">
		<view class="son one">1</view>
		<view class="dauther two">2</view>
		<view class="son three">3</view>
		<view class="dauther four">4</view>
	</view>
</template>

<script></script>

<style>
	.father{
		display: flex;
		justify-content: space-between;
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: #ff5500;
		border-radius: 5px;
	}
	.dauther{
		width: 50px;
		height: 50px;
		background-color: #5500ff;
		border-radius: 5px;
	}
	.one{
		order: 4;
	}
	.two{
		order: 3;
	}
	.three{
		order: 2;
	}
	.four{
		order: 1;
	}
	
</style>