HTML – 如何让flex中的孩子全宽？

发布时间：2020-12-14 18:28:51 所属栏目：资源来源：网络整理

导读：我开始使用flex,我很喜欢它的工作方式. 我正在使用flex布局,我希望仪表板主体内的btn-group类能够达到父级的全宽.现在它的宽度等于按钮宽度. 我想在这里实现的是,我想在两个按钮之间添加空格,我不想使用右边或左边边距.我希望btn-group div能够使用其父仪表

我开始使用flex,我很喜欢它的工作方式.

我正在使用flex布局,我希望仪表板主体内的btn-group类能够达到父级的全宽.现在它的宽度等于按钮宽度.

我想在这里实现的是,我想在两个按钮之间添加空格,我不想使用右边或左边边距.我希望btn-group div能够使用其父仪表板主体的全宽,以便我可以使用flex属性align-content：space-between在两个按钮之间留出足够的空间.

除了在按钮周围添加边距/填充之外,还有其他方法可以做同样的事情.

谢谢.

这是代码：

.dashboard-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>

解决方法

这是实现这一目标的正确方法：

.dashboard-body{
  text-align:center;
  width: 300px;
  margin: 0 auto;
}
.btn-group{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}
.btn-group a{
  flex:0 0 auto;
}

<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!