css：flex布局最后一个子元素靠右摆放-阿里云开发者社区

开发者社区> 开发者小助手-bz> 正文

css：flex布局最后一个子元素靠右摆放

来自：彭世瑜的博客 2021-11-27 16

简介： css：flex布局最后一个子元素靠右摆放
+关注继续查看

基本的样式和布局

<style>
  .box {
    display: flex;
  }

  .item {
    height: 100px;
    width: 100px;
    border: 1px solid green;
    color: green;
    font-size: 50px;
    line-height: 100px;
    text-align: center;
  }
</style>


<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item item-right">3</div>
</div>

方案一

整个元素块靠右

.item-right {
    margin-left: auto;
  }

1.png

方案二

元素块撑满剩余空间，文字靠右

.item-right {
    flex: 1;
    text-align: right;
  }

image.png可以看到，两种方案都可以实现最后一个子元素靠右

参考

flex布局让某个子元素靠右显示

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发
开发前端 前端开发问题 前端开发分享 前端开发框架 开发前端框架
开发者社区 > 彭世瑜的博客
作者高分内容
更多
允许chrome浏览器运行flash 105
相关文章
阿里云小秘
阿里云服务器怎么设置密码？怎么停机？怎么重启服务器？
如果在创建实例时没有设置密码，或者密码丢失，您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9573 0
琴瑟
云服务器 ECS 配置：ECS之Windows服务器时钟同步设置
6409 0
哈你真皮
如何用纯 CSS 创作一个单元素抛盒子的 loader
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/qKwXbx 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
579 0
vip1888
Xshell使用SSH远程登录阿里云ECS服务器CentOS7
13094 0
a里上云建设
阿里云服务器如何登录？阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录？场景不同，阿里云优惠总结大概有三种登录方式： 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13276 0
程序员在线
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程，阿里云的服务器初始化是通过更换系统盘来实现的，是免费的，阿里云百科网分享服务器初始化教程： 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态，服务器中的数据也会被清空，所以初始化之前一定要先备份好。
11580 0
java小工匠
CSS5-选择器5-子元素选择器
CSS选择器-系列文章 1、子元素选择器 div>p选择div的直接子元素p。注意与后代选择器的对比。 2、效果演示 源代码： 子元素选择器 #id1>p{ color: red...
611 0
用数据说话
阿里云服务器ECS登录用户名是什么？系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator，Linux镜像服务器用户名root
4088 0
云小站
阿里云服务器设置教程：安装宝塔面板一步到位管理你的ECS
54374 0
stefanie燕
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程，阿里云的服务器初始化是通过更换系统盘来实现的，是免费的，阿里云百科网分享服务器初始化教程： 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态，服务器中的数据也会被清空，所以初始化之前一定要先备份好。
6991 0
+关注
开发者小助手-bz
1569
文章
0
问答
作者高分内容
更多
允许chrome浏览器运行flash 105
文章排行榜
最热
最新
1 13个实验带你玩转MaxCompute SQL之JSON操作 161108
2 实战：使用Spring Boot Admin实现运维监控平台 121835
3 免费下载|《Top20低代码实践案例》独家上线 数据互通、降本提效、企业数字化变身的秘密都在这里！ 168583
4 微服务 Springcloud 架构设计 53668
5 阿里云丨洛神·云网络 发布业界首本《云计算公网质量白皮书》 34507
6 深入浅出时序数据库 – 智能互联系统基础设施 21583
7 我与阿里云IoT的故事 20638
8 认证故事|我与阿里云认证的故事#学考故事 110180
9 印象最深的一个bug——排查修复问题事件BEX引发的谷歌浏览器闪退崩溃异常 28576
10 重磅首发！阿里云专家团队倾情打造《ECS全知道（上）》，为你排忧解难，顺利通关ECS！ 12567
11 并发编程实践之公平有界阻塞队列实现 30298
12 阿里云发布云原生加速器，携手生态企业拥抱数字时代 15255
13 信不信十分钟让你彻底搞懂java反射 15561
14 聊聊各端手势体系以及对 Web 标准手势的思考 23431
15 一个demo让你彻底理解线程池工作流程 16109
16 anaconda切换镜像源（以阿里云为例） 11628
17 synchronized底层实现原理（保证看懂） 14924
18 全面进入云原生时代，拥抱Kubernetes，再见了Spring Cloud 23740
19 redis淘汰策略及3.x与4.x区别 14876
20 String str = new String(“abc“)到底new了几个对象 14708
1 vep视频翻录为mp4（支持大黄蜂云课堂6.05） 352
2 markdown语法图文介绍 17615
3 冬季实战营第一期：从零到一上手玩转云服务器学习报告 3309
4 Python 函数详解| 学习笔记 80
5 关于“冬季实战营第一期”的学习报告 107
6 高智商学生如何玩转无影云电脑 51
7 工商银行实时大数据平台建设历程及展望 328
8 无影云桌面让你无处不在 70
9 产业白热化竞争来临，看人工智能如何带动经济数智化发展 79
10 冬季实战营第一期：从零到一上手玩转云服务器 1457
11 学习报告——冬季实战营第一期：从零到一上手玩转云服务器 86
12 来更快的Maven了，我的天，速度提升了8倍！（1） 62
13 征文投稿丨使用轻量应用服务器搭建扫码测试项目 90
14 谈谈前端水印实现的几种方式 72
15 Datastream 开发打包问题 79
16 2021云上架构与运维峰会演讲合集 84
17 项目中如何优雅的消除if-else 110
18 零基础如何上手APICloud App、小程序多端开发 64
19 使用无影云当做自己的第二台电脑 73
20 初识阿里云E-MapReduce ClickHouse，到底有哪些优势？ 105
推荐文章
镜像站体验官招募中，Airpods耳机等你来领！ ”云上超级电脑、万元豪礼限时免费领取！ 免费下载《云原生时代下的App开发》 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载