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

abcd23212年前前端开发2285

父元素设置了flex 布局

display: flex;
align-items: center;


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


方法一

flex: 1;
text-align: right;


方法二

margin-left: auto;


小结:

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


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


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

相关文章

HTML5实现网页的全屏切换

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

a标签的为空链接和返回上一页的设置方法

a标签中的href值是一个地址,指示点击这个标签时,转向的地址。但是当使用a标签来做按钮,不需要跳转时,href值即为空。 我们需要使用以下两种方式:...

透明度与十六进制代码转换

透明度参照表:00%=FF(不透明) 5%=F2 10%=E5 15%=D8 20%=CC 25%=BF 30%=B2 35%=A5 40%=99 45%=8c 50%=7F 55%=72 60%=6...

谷歌在线字库应用

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

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

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

CSS之文本两端对齐

CSS之文本两端对齐

说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐,当然我们也使用justify来实现文本两端对齐。如上图,两端对齐...

发表评论    

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