时间戳

首页 > 解决方案 > 为可选的弹性项目分配空间

html - 为可选的弹性项目分配空间

问题描述

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

我不知道如何始终确保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>

标签： htmlcssflexbox

解决方案

对代码的小幅更新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>

推荐阅读