flex布局设置单个子元素靠右

abcd23212年前前端开发2359

父元素设置了flex 布局

display: flex;
align-items: center;


如何让某个子元素靠右呢?


方法一

flex: 1;
text-align: right;


方法二

margin-left: auto;


小结:

· 父盒子加了display: flex,就相当于起到浮动的效果,盒子会自行排列成一排;


· 若想让父盒子里的某一个盒子靠右显示,其他盒子居左, 只需要在父盒子里面,加入display: flex,在想要移动的盒子里面,加入margin-left: auto即可;


· 同理,如果你想让第一个盒子向左显示,其余盒子都向右显示,只需要给左边的第一个盒子设置 margin-right:auto即可;

相关文章

谷歌在线字库应用

Google Fonts 提供了超过 600 种的高质量的字体,所有的浏览器都兼容,无需引入 JavaScript,简单易用,更重要的是,免费。如何使用 Google Fonts在线字库地址:http...

PHP实现将textarea的值根据回车换行拆分至数组

textarea回车换行为 \r\n$keyword_list = trim($_REQUEST['keywords']); $keyword_arr ...

取消chrome浏览器下input和textarea的默认样式

chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所...

3种方法实现CSS隐藏滚动条并可以滚动内容

隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。方法1:计...

css动画是可以暂停的

css动画是可以暂停的

css动画大家都不陌生,但是你知道css动画是可暂停的吗?如果你不知道就来看看吧。虽然用过很多次animation,但是也就前几天才知道动画是可以暂停的,可见自己对动画的了解还是不够深,一起来学习一下...

jQuery.raty.js星星评分插件使用

jQuery.raty.js星星评分插件使用

在做前端开发的过程中,我们经常用到星星评分插件。这里推荐一jquery,raty.js是一个专门用来做评分的。星星显示的效果如下:<script src="js/jquery...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。