flex应用

本文详细介绍如何使用CSS的Flex布局进行元素位置调整、水平居中及水平垂直居中,包括使用order属性调整元素顺序,justify-content属性实现水平居中,以及align-items属性实现垂直居中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

flex的一个应用例子


ABC三个页面元素,怎样调换AC元素的位置使其变成CBA:

  1. 首先调换div顺序
        <div class="flex">
			<div>第一个元素</div>
			<div>第二个元素</div>
			<div>第三个元素</div>
		</div>
         /*flex调换元素测试*/
		.flex > div:nth-child(1){
			background:red;
			order:2;
		}
		.flex > div:nth-child(2){
			background:lightblue;
			order:1;
		}
		.flex > div:nth-child(3){
			background: green;
			order:3;
		}
		.flex{
			display:flex;
			flex-direction: row;
			color:white;
		}
		.flex >div{
			flex:0 1 auto;
		}

应用以上代码可以得到下面的效果:
在这里插入图片描述
可以看到 <div>第一个元素</div><div>第二个元素</div> 前,使用了flex中的order属性之后可以很轻易的将其调换顺序。
2. flex水平居中测试

       .flex{
  			display:flex;
			flex-direction: row;
			color:white;
			justify-content:center;
			background-color:aqua;
			height:100px;
			margin:0;
			padding:0;
		}
		.flex >div{
			flex:0 1 auto;
			display:flex;
			height:50px;
			width:80px;
			justify-content:center;
		}

应用以上代码可以看到以下效果:
在这里插入图片描述
可以看出,使用flex的justify-content可以实现水平居中。
3. flex水平垂直居中测试

       .flex{
			display:flex;
			flex-direction: row;
			color:white;
			justify-content:center;
			align-items: center;
			background-color:aqua;
			height:100px;
			margin:0;
			padding:0;
		}
		.flex >div{
			flex:0 1 auto;
			display:flex;
			height:50px;
			width:80px;
			justify-content:center;
			align-items: center;
		}

应用以上代码可以得到以下效果:
在这里插入图片描述
可以看出,使用flex的align-item可以实现水平居中。
控制水平居中的属性是 justify-content 而需要控制垂直居中的时候只需要将 align-items 设置为 center 即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值