请问这种flex布局如何去写？-趣兔百科

三个元素前两个居中第三个靠右显示

<div style="display:flex">
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.box {
  width: 200px;
  height: 20px;
  background-color: pink;
  display: flex;
  justify-content: space-between;
}
.box div {
  width: 50px;
  background-color: aqua;
  height: 20px;
  text-align: center;
}
</style>
<body>
  <div class="box">
    <div>店铺</div>
    <div>商品</div>
    <div>编辑</div>
  </div>
</body>

对最后一个标签"编辑"添加 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

回答

183

请问这种flex布局如何去写？

回答

相关文章