css 如何让孩子在Flex中走全角？

06odsfpq 于 2023-02-17 发布在其他

关注(0)|答案(4)|浏览(168)

我已经开始使用flex，我喜欢它的工作方式。
我正在使用flex布局，我希望dashboard-body中的btn-group类与父类的宽度相同，现在它的宽度等于两个按钮加起来的宽度。
这里我想实现的是在两个按钮之间添加空间，我不想使用左边距或右边距，我想让btn-group div具有其父dashboard-body的全宽，这样我就可以使用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>

css

来源：https://stackoverflow.com/questions/36080367/how-to-make-child-in-flex-go-full-width

4条答案

按热度按时间

t1qtbnec1#

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

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

赞(0）回复(0）举报 2023-02-17

ogq8wdun2#

您可以在. btn组上添加align-self:stretch。
下面是一个演示：https://jsfiddle.net/f5noh2q7/1/

赞(0）回复(0）举报 2023-02-17

6tr1vspr3#

只需添加以下css规则：

flex: auto;

赞(0）回复(0）举报 2023-02-17

pvcm50d14#

您可以使用CSS网格，样式仅应用于父级。
在此阅读更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layou
示例：

.btn-group{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

赞(0）回复(0）举报 2023-02-17

我来回答

css 如何让孩子在Flex中走全角？

4条答案

相关问题

热门标签

最新问答