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

Posted 2023-03-05

【中文标题】为可选的弹性项目分配空间[重复]

【英文标题】：Allocate space for optional flex items [duplicate]

【发布时间】：2019-03-02 08:15:11

【问题描述】：

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

项目 价格 打顶//optional 订购按钮

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

.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 我不能 100% 确定回答 OP 的问题——即使是第二个答案

how to always ensure that Order button is fixed to the end of the list so space is allocated --> 他希望按钮向右对齐，他使用了 align-self 这是错误的属性，因为它将在交叉轴上而不是主轴上对齐。他只需要使用margin auto

【参考方案1】：

对您的代码 justify-content: space-between; 的小幅更新修复了该问题 :)

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