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

abcd23211年前前端开发1601

父元素设置了flex 布局

display: flex;
align-items: center;


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


方法一

flex: 1;
text-align: right;


方法二

margin-left: auto;


小结:

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


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


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

相关文章

CSS实现单行、多行文本溢出显示省略号(…

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;...

移动端自适应Rem自适应js

    当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素<html>字体大小的两倍,如果html的font-size为12p...

滚动条触动css动画效果——scrollreveal.js

滚动条触动css动画效果——scrollreveal.js

和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollR...

Ueditor百度编辑器中的 setContent()方法的使用

百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,bool...

iframe背景透明设置方法

iframe的背景颜色在IE下为window的当前窗口颜色(默认白色,可以在显示外观处对其进行设置),这导致在大幅背景上插入iframe时,需要给它“透底”,可是IE不支持对iframe设置背景色,那...

jq动画重复执行的解决方法

1. 在你的点击事件中加上一个判断,假设产生动画效果目标的是div这个节点,那么你要加上这个判断 它会确保你的动画只会在上一个动画结束后才能产生 ,可以保持动画的完整性,但是连续点击时会有反映迟钝的感...

发表评论    

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