How to set 66% area to one element and 33% and 33% to the other two elements using flexbox? [closed]

问题

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>

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

回答2:

Try to use margin on flex items to align them left and 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>

回答3:

If you wrap your two right items into a div, justify-content: space-between will work as you are expecting:

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

来源：https://stackoverflow.com/questions/49400113/how-to-set-66-area-to-one-element-and-33-and-33-to-the-other-two-elements-usi

标签

html

css

flexbox