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

abcd23211年前前端开发1593

父元素设置了flex 布局

display: flex;
align-items: center;


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


方法一

flex: 1;
text-align: right;


方法二

margin-left: auto;


小结:

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


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


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

相关文章

用JS获取地址栏参数的方法

采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)function GetQueryString(name) {      v...

谷歌在线字库应用

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

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

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

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

纯CSS解决锚点跳转偏移

能用css自然不想用js解决,因为在加载方面,css总是先加载,并且速度很快。.div{    position:relative;   &nbs...

滚屏加载–无刷新动态加载数据技术的应用

滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后 台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其...

JQ获取浏览器宽度,根据不同宽度给div赋值

var winWidth = $(window).width();     var winHeight =$...

发表评论    

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