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

image.png

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

<div style="display:flex">
  <div></div>
  <div></div>
  <div></div>
</div>
阅读 2k
4 个回答

image.png

<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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题