三个元素 前两个居中 第三个靠右显示
<div style="display:flex">
<div></div>
<div></div>
<div></div>
</div>
三个元素 前两个居中 第三个靠右显示
<div style="display:flex">
<div></div>
<div></div>
<div></div>
</div>
对最后一个标签"编辑"添加 margin-left: auto;
.tag {
// . . . 其他省略
display: flex;
justify-content: space-between;
align-items: center;
}
.tag div {
// . . . 其他省略
}
.tag div&:last-child {
margin-left: auto;
}
<style>
.flex {
display: flex ;
}
.flex-1 {
flex: 1 1 0%;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
</style>
<body>
<div class="flex items-center">
<div class="flex-1 flex items-center justify-center">
<div>店铺</div>
<div>商品</div>
</div>
<div>编辑</div>
</div>
</body>
我想或许,你要的是这样的一个效果吧。
https://linxz.github.io/flex_learn_manual/articles/example/04...
可以拖动页面 demo 中,那个边框的右下角改变容器宽度看看效果。
https://linxz.github.io/flex_learn_manual/demo.html?id=72
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决