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

Answer 1

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>

Answer 2

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>

Answer 3

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>