web-dev-qa-db-ja.com

フレックスで子供を全幅にする方法は？

私はflexを使い始め、それがどのように機能するかを愛しています。

フレックスレイアウトを使用していて、btn-group内のクラスdashboard-bodyは、親の幅いっぱいに移動します。現在、その幅は両方のボタンの幅に等しくなっています。

ここで達成したいのは、両方のボタンの間にスペースを追加し、右または左のマージンを使用したくないということです。 btn-group divで親の幅いっぱいにdashboard-bodyフレックスプロパティを使用できるように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>
htmlcsshtml5css3flexbox
14
vikrantnegi007

これはそれを達成する正しい方法です：

.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>
18
Tarek.hms

あなたは付け加えられます align-self:stretch .btn-groupで。
ここにデモがあります： https://jsfiddle.net/f5noh2q7/1/

4
Mamboleoo