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

abcd232112个月前前端开发1376

父元素设置了flex 布局

display: flex;
align-items: center;


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


方法一

flex: 1;
text-align: right;


方法二

margin-left: auto;


小结:

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


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


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

相关文章

移动端自适应Rem自适应js

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

iframe背景透明设置方法

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

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

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

滚轮滚动时让div背景图片移动的相对缓慢

鼠标滚轮滚动时,这一个div的移动速度相对较慢,下面其他div内容能够追上并超越它。css代码:.banner { width: 100%; position:...

背景图片靠右对齐,并且间距从右算起

假如右边有个小箭头需要右对齐并且垂直居中,可以写成 background:url("images/icon.png")no-repeat right center;如果需要离右边1...

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

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

发表评论    

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