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

abcd23212年前前端开发2034

父元素设置了flex 布局

display: flex;
align-items: center;


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


方法一

flex: 1;
text-align: right;


方法二

margin-left: auto;


小结:

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


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


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

相关文章

图片垂直居中,宽高按比例缩放不变形

高度大于宽度,按高度来,宽度自动;反之宽度大于高度也一样.sbzs dl{ width:279px; height:238px; line-height:234...

css来控制img正方形自适应

该方法主要用来做网站自适应的,同时可以实现撑起内容高度。实现方法很多,其中简洁的方法就是直接在img的父元素上加padding-bottom<div class="img-b...

css动画是可以暂停的

css动画是可以暂停的

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

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

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

iframe背景透明设置方法

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

HTML5实现网页的全屏切换

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

发表评论    

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