首页
视频
资源
登录
转
flex子元素靠右。flex让某个子元素靠右或靠左显示
7330
人阅读
2022/12/8 21:53
总访问:
577675
评论:
0
收藏:
0
手机
分类:
前端
### 以下以块元素的Flex布局为示例: 只需要两句代码,轻松搞定! **代码1:** 在父元素里面加入以下代码: (父盒子加了display: flex,就相当于起到浮动的效果,盒子会自行排列成一排) ``` display: flex ``` **代码2:** 在需要移动的子元素里(此处为靠右显示),加入以下代码: ``` margin-left: auto ``` ### 子元素居右显示,示例如下: 【 html版块示例 】: ``` <!--我是父盒子--> <div class="father_box"> <!--三个子盒子--> <div class="son_box1">普通盒子甲</div> <div class="son_box2">普通盒子乙</div> <div class="son_box3">靠右显示盒子</div> </div> ``` 【 css版块示例】 ``` .father_box { margin: 100px auto; width: 300px; height: 200px; background-color: rebeccapurple; display: flex; } .son_box1 { width: 80px; height: 80px; background-color: cornflowerblue; } .son_box2 { width: 80px; height: 80px; background-color: pink; } .son_box3 { width: 100px; height: 100px; background-color: blue; color: #ff9d00; margin-left: auto; } ``` 网页显示效果: ![](https://img.tnblog.net/arcimg/notebook/71fc4c0e460946288b504d7243f02d98.png) ### 子元素居左显示 【 html版块示例 】: ``` <!--我是父盒子--> <div class="father_box"> <!--三个子盒子--> <div class="son_box1">靠左显示盒子</div> <div class="son_box2">盒子甲</div> <div class="son_box3">盒子乙</div> </div> ``` 【 css版块示例】 ``` .father_box { margin: 100px auto; width: 300px; height: 200px; background-color: rebeccapurple; display: flex; .son_box1 { width: 100px; height: 100px; background-color: mediumspringgreen; margin-right: auto; } .son_box2 { width: 80px; height: 80px; background-color: saddlebrown; } .son_box3 { width: 80px; height: 80px; background-color: blue; color: #ff9d00; } ``` 网页显示效果: ![](https://img.tnblog.net/arcimg/notebook/c9632611d24f477a8d2259786e5c2797.png) ### 小结: 父盒子加了display: flex,就相当于起到浮动的效果,盒子会自行排列成一排; 若想让父盒子里的某一个盒子靠右显示,其他盒子居左, 只需要在父盒子里面, 加入display: flex,在想要移动的盒子里面,加入margin-left: auto即可; 同理,如果你想让第一个盒子向左显示,其余盒子都向右显示,只需要给左边的第一个盒子设置 margin-right:auto即可; 此外,行内元素也可以使用Flex布局,子元素的代码如下: ``` .box{ display:inline-flex;} ``` 原文链接:https://blog.csdn.net/ZHENGCHUNJUN/article/details/116756998
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
TeachingNote
这一生多幸运赶上过你.
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
36篇
后端
5篇
ORM
16篇
前端
48篇
随笔
13篇
移动开发
6篇
数据库
6篇
英语
3篇
rabbitmq
1篇
.net core
5篇
unity
1篇
k8s
1篇
云服务
1篇
DDD
1篇
网络
1篇
更多
mysql
1篇
python
2篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术