flex布局 子元素常见属性之 align-self 和 order

align-self
        控制子项自己侧轴上的排列方式,用来给单个子元素设置,会覆盖掉父元素的align-items属性设置。

属性值:flex-start(默认)、flex-end、center、

eg:
        让1号和3号子元素按默认排列方式排列(默认主轴为x轴,排列为flex-start),2号在侧轴上居中排列,四号在侧轴上靠底端排列

	   <div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
		<style type="text/css">
			div{
				display: flex;
				align-items: flex-start;	/*默认值 可不写*/
				width: 900px;
				height: 500px;
				background: #FAEBD7;
			}
			span{
				width: 200px;
				height: 100px;
				background: red;
			}
			div span:nth-child(2){
				align-self: center;	/*2号在侧轴上居中*/
				background: orange;
			}
			div span:nth-child(4){
				align-self: flex-end;	/*4号在侧轴上贴底端排列*/
				background: blue;
			}
		</style>

执行结果:
在这里插入图片描述


order:控制子元素的排列顺序
用法:
        order:具体数字;
ps:
        order的属性值可以是任意值,默认值为0,数字越小,排在越前面

eg:将子项目中的1、2、3、4号盒子变为排列顺序为2、4、3、1

	   <div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
		<style type="text/css">
			div{
				display: flex;
				width: 900px;
				height: 200px;
				background: #FAEBD7;
			}
			span{
				width: 200px;
				height: 100px;
				background: greenyellow;
			}
			div span:nth-child(1)
			{
				order: 2;
			}
			div span:nth-child(2){
				order: -2;
			}
			div span:nth-child(3){
				order: 1;
			}
			div span:nth-child(4){
				order: -1;
			}
		</style>

执行结果:
在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值