Question

我想在左边设置order id并将其余两个设置在div的最右边。 total和view元素之间应该有相等的空格，但应该在右边。 justify-content:space-between在它们之间设置相等的空间，flex-grow或shrink在我的情况下不起作用。难道我做错了什么？请帮忙。

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

Answer 1

你不能分成 66％+ 33％+ 33％，你可以给flex 2 + 1 + 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试在弹性项目上使用margin来对齐left和right

div {
  display: flex;
}

.orders-table-text {
  border: 1px solid red;
}

.orders-table-text.right {
  margin-left: auto;
}

.orders-table-text.left {
  margin-right: auto;
}

<div layout="row" layout-align="space-between" class="orders-table-header">
  <p class="orders-table-text text-center left">ORDER ID</p>
  <p class="orders-table-text text-center right">TOTAL</p>
  <p class="orders-table-text text-center right">VIEW</p>
</div>

Answer 3

如果您将两个正确的项目包装成div，justify-content: space-between将按预期工作：

.orders-table-header {
  display: flex;
  justify-content: space-between;
}

.orders-table-text {
  border: 1px solid red;
}

.right {
  display: flex;
}

<div layout="row" layout-align="space-between" class="orders-table-header">
  <div>
    <p class="orders-table-text text-center left">ORDER ID</p>
  </div>
  <div class="right">
    <p class="orders-table-text text-center right">TOTAL</p>
    <p class="orders-table-text text-center right">VIEW</p>
  </div>
</div>

如何使用flexbox将66％面积设置为一个元素，将33％和33％设置为其他两个元素？

3 个答案: