为可选弹性项目分配空间[重复]

Question

我正在尝试设计一个菜单项列表，它有四个选项，其中三个选项始终存在：

• 项目
• 价格
• 置顶//可选
• 订购按钮

我想不出如何始终确保Order按钮固定在列表的末尾，以便为缺少的选项分配空间

null

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

null

Answer 1

对代码进行小更新justify-content：space-between；修复了此问题：）

null

.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%;
}

html lang-html prettyprint-override"><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>