web-dev-qa-db-fra.com

Comment faire en sorte que l'enfant en flex soit pleine largeur?

J'ai commencé à utiliser le flex et j'aime son fonctionnement.

J'utilise la mise en page flexible et je veux que le btn-group classe à l'intérieur dashboard-body pour parcourir toute la largeur du parent. À l'heure actuelle, sa largeur est égale à la largeur des deux boutons ensemble.

Ce que je veux réaliser ici, c'est que je veux ajouter de l'espace entre les deux boutons et que je ne veux pas utiliser la marge à droite ou à gauche. Je veux le btn-group div pour parcourir toute la largeur de son parent dashboard-body pour pouvoir utiliser la propriété flex align-content: space-between pour avoir suffisamment d'espace entre les deux boutons.

Y a-t-il une meilleure façon que d'ajouter une marge/un rembourrage autour des boutons pour faire de même.

Merci.

Voici le code:

.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

C'est la bonne façon d'y parvenir:

.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

Vous pouvez ajouter align-self:stretch sur le groupe .btn.
Voici une démo: https://jsfiddle.net/f5noh2q7/1/

4
Mamboleoo