flex实现最后一个元素居右

使用flex实现最后一个元素居右的步骤：

父级元素使用flex布局
子级元素使用margin-left: auto;实现元素居右显示

代码示例：

让class属性值为two的元素居右显示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.a {/* 1》父级元素声明flex布局 */display: flex;background-color: royalblue;height: 100px;}.a .one {background-color: aqua;height: 20px;}.a .two {margin-left: auto;background-color: red;height: 40px;}</style></head><body><div class="a"><div class="one">111111111111111111</div><div class="two">222222222222222222</div></div></body>
</html>

效果：

flex实现最后一个元素居右相关推荐

在使用flex布局方式让最后一个元素居右（最右边）显示，一层 HTML 结构实现左“右”布局，使用flex实现居中对齐
我们在布局的时候通常会在导航栏上有居左和居右显示,中间留白,这样页面伸缩的时候不会影响效果.形如下图以往我们可能更多会使用float浮动布局来实现这种效果,但是flex得到广泛支持以后就可以更方便和 ...
Bootstrap4 导航栏元素居右
Bootstrap 4正解: .ml-auto元素居右 .mr-auto元素居左在某度上查了半小时还是没查出什么名堂,搜出来的方法大多都是Bootstrap3的,实测pull-right或navba ...
Bootstrap4 .ml-auto元素居右.mr-auto元素居左
Bootstrap4 导航栏元素居右 Bootstrap 4正解: .ml-auto元素居右 .mr-auto元素居左
flex布局设置justify-content为space-between，最后一个元素无法右对齐
给flex盒子设置justify-content:space-between,双行排列时出现最后一个元素无法右侧对齐的情况,如下图所示. 可以看到item4和item2在右侧没有对齐,代码如下: &l ...
bootstrap4导航栏居右
.ml-auto 元素居右 .mr-auto 元素居左
bootstarp元素靠右或者靠左排列
Bootstrap3设置搜出来的方法大多都是Bootstrap3的 pull-right navbar- right Bootstrap4设置 ml-auto元素居右 mr-auto元素居左
微信小程序居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
微信小程序居中.居右.横纵布局 1.水平垂直居中(相对父类控件) 方式一:水平垂直居中父类控件: display: flex;align-items: center;//子控件垂直居中justify ...
html左侧td字体居右,如何在td中控制字体右对齐且加粗_html/css_WEB-ITnose
800 居右对齐已经实现了,怎么实现字体加粗呢 ?? 谢谢回复讨论(解决方案) 像这样的问题,楼主最好是先在网上找找答案!这才是好的学习方法 font-weight允许值 normal | bold ...
html div 右侧,span在div里居左和居右布局
两个span在div内一个居左一个居右结构把span当作div来结构结构,让一个span在div里居左,一个span在div内居右,接纳float浮动机关. 一.症结CSS代码: 居左:float: ...

flex实现最后一个元素居右

flex实现最后一个元素居右相关推荐

最新文章

热门文章