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

abcd23211年前前端开发1546

父元素设置了flex 布局

display: flex;
align-items: center;


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


方法一

flex: 1;
text-align: right;


方法二

margin-left: auto;


小结:

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


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


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

相关文章

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

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

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

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

实现checkbox 翻页后,仍保持选中状态

使用的技术 localStorage.setItem(key,val); localStorage.getItem(key); <input...

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

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

HTML5实现网页的全屏切换

使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下://进入全屏     func...

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

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

发表评论    

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