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

发布于
2023-06-12 湖北

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

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

css vue.js react javascript 前端

阅读 2k

4 个回答

得票最新

玛拉_以琳

8.7k41542

发布于
2023-06-12 上海

<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>

未央

255110

发布于
2023-06-12 上海

对最后一个标签"编辑"添加 margin-left: auto;

.tag {
  // . . . 其他省略 
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag div {
  // . . . 其他省略 
}

.tag div&:last-child {
  margin-left: auto;
}

Mrsum

9591415

发布于
2023-06-12 广东

<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>