Allocate space for optional flex items

Question

I am trying to design a menu item list which has four options, three of which are always present:

Item
Price
topping //optional
Order button

I cant figure out how to always ensure that the Order button is fixed to the end of the list so space is allocated for the missing option

.menu-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: space-between;
}
.menu-item #menu-item-form {
  display: none;
}
.menu-item .item {
  flex-basis: 50%;
}
.menu-item .fill {
  flex-basis: 10%;
}
.menu-item button{

  flex-basis: 20%;
  align-self: flex-end;
}

<li class="menu-item">
  <form id="menu-item-form">
  </form>
  <div class="item">Chicken Burger</div>
  <span class="fill price">1350.00</span>
  <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
</li>

@TemaniAfif i'm not 100% sure that answers OPs question - even the second answer — CodeBoyCode, Sep 26 '18 at 14:09
`how to always ensure that Order button is fixed to the end of the list so space is allocated` --> he want the button to be aligned to the right and he used align-self which is the wrong property because it will align on the cross axis not the main axis. All he need is to use margin auto — Temani Afif, Sep 26 '18 at 14:10

score 1 · Accepted Answer · answered Sep 26 '18 at 14:09

Minor update to your code justify-content: space-between; fixes the issue :)

.menu-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.menu-item #menu-item-form {
  display: none;
}
.menu-item .item {
  flex-basis: 50%;
}
.menu-item .fill {
  flex-basis: 10%;
}
.menu-item button{
  flex-basis: 20%;
}

<li class="menu-item">
  <div class="item">Chicken Burger</div>
  <span class="fill price">1350.00</span>
  <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
</li>

Allocate space for optional flex items

1 Answers1