如何使用flexbox将66％的面积设置为一个元素，将33％和33％的面积设置为其他两个元素？ [英] How to set 66% area to one element and 33% and 33% to the other two elements using flexbox?

问题描述

我想将订单ID 设置在最左侧，并将其余两个都设置在div的最右侧。 总计和 view 元素之间应具有相等的空间，但应在右边。 justify-content：space-between 在它们之间设置相等的空间，在我的情况下，伸缩或收缩不起作用。难道我做错了什么？

I want to set the order id on the very left and set the rest of the two to the very right of the div. The total and view elements should have equal space between them but should be to the right. justify-content:space-between sets equal space in between them and flex-grow or shrink is not working in my case. Am i doing something wrong? please help.

<div layout="row" layout-align="space-between" class="orders-table-header">
  <p class="orders-table-text text-center" style="flex-shrink:2">ORDER ID</p>
  <p class="orders-table-text text-center" style="flex-grow:1">TOTAL</p>
  <p class="orders-table-text text-center" style="flex-grow:1">VIEW</p>
</div>

推荐答案

您不能拆分为 66％ + 33％+ 33％，您可以给 flex 2 + 1 + 1

You can't split into 66%+33%+33% ,You could give flex 2+1+1

.text-center {
  text-align:center;
}

<div layout="row" layout-align="space-between" class="orders-table-header" style="display: flex;">
        <p class="orders-table-text text-center" style="flex: 2;background-color: aquamarine;">ORDER ID</p>
        <p class="orders-table-text text-center" style="flex: 1;background-color: bisque;">TOTAL</p>
        <p class="orders-table-text text-center" style="flex: 1;background-color: coral;">VIEW</p>
 </div>

这篇关于如何使用flexbox将66％的面积设置为一个元素，将33％和33％的面积设置为其他两个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！