随码网随码网

怎么使用flex设置左边盒子是右边的两倍

怎么使用flex设置左边盒子是右边的两倍

要使用 Flexbox(弹性盒布局)来设置左边的盒子宽度是右边的两倍,可以使用 flex-grow 属性。flex-grow 控制弹性盒子的扩展比例,允许你指定一个比例值来决定各个项目在可用空间中的相对分配比例。

<div class="container">
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>
.container {
  display: flex; /* 使用 Flexbox 布局 */
}

.left {
  flex-grow: 2; /* 左边盒子的扩展比例为2 */
  background-color: lightblue;
}

.right {
  flex-grow: 1; /* 右边盒子的扩展比例为1 */
  background-color: lightgreen;
}

未经允许不得转载:免责声明:本文由用户上传,如有侵权请联系删除!

赞 ()

评论