0
votes

les éléments enfants passent à une nouvelle ligne même s'ils ne dépassent pas la largeur du parent

J'essaye de faire en sorte que mes 3 cartes soient sur une même ligne. Je calcule la largeur de chaque enfant avec sa marge et le résultat est la taille exacte width de l'élément conteneur. Alors pourquoi il n'y a pas 3 cartes sur une ligne? Où est le problème et comment puis-je réussir à le faire fonctionner avec 3 éléments dans la même ligne avec ces tailles exactes de conteneur et d'éléments?

<div class="container">

  <div class="cards">
    <div class="card">
      <img src="./img/icon1.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon2.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon3.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon4.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon5.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon6.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
  </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

.container {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.cards-wrapper {
  background: orange;
}

.cards {
  background: blue;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.card {
  height: 225px;
  width: 370px;
  border: 1px solid red;
  margin: 29px 30px;
}

https://codepen.io/simonika/pen/ZEQBxZj

html css flexbox

2 commentaires

Vérifiez ceci: flexbox.buildwithreact.com

le total ne correspond pas: vous aurez 1290 avec le dimensionnement de la boîte et 1296 sans le dimensionnement de la boîte

3 Réponses :

0
votes

Vos calculs sont faux. Vous devez factoriser la marge gauche / droite en six fois par ligne, ce qui ramènerait votre 30px à 20px puis prendre en compte la bordure qui devient 19px.

<div class="container">

  <div class="cards">
    <div class="card">
      <img src="./img/icon1.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon2.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon3.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon4.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon5.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon6.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
  </div>
</div>

.container {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.cards-wrapper {
  background: orange;
}

.cards {
  background: blue;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.card {
  height: 225px;
  width: 370px;
  border: 1px solid red;
  margin: 29px 19px;
}

1230 - 370(3) = 120 // total remaining space
120 / 6 = 20 // left and right margin size

Notez que vous pouvez omettre la partie bordure du calcul si vous définissez le box-sizing sur border-box

p >

0 commentaires

1
votes

Deux choses:

1.) Ajoutez box-sizing: border-box; à tout (en utilisant le sélecteur * ) pour inclure les bordures dans les largeurs .

2.) Les marges latérales gauche / droite sont ajoutées pour les éléments adjacents, donc définissez une marge-droite de 30 pixels uniquement pour le dernier / troisième élément comme indiqué ci-dessous:

<div class="container">

  <div class="cards">
    <div class="card">
      <img src="./img/icon1.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon2.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon3.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon4.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon5.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon6.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.container {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.cards-wrapper {
  background: orange;
}

.cards {
  background: blue;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.card {
  height: 225px;
  width: 370px;
  border: 1px solid red;
  margin: 29px 30px;
  margin-right: 0;
}
.card:nth-of-type(3n) {
   margin-right: 30px;
}

1 commentaires

j'ai oublié d'ajouter que j'ai * {margin: 0; rembourrage: 0; box-dimensionnement: border-box; style de liste: aucun; } Merci. Cela fonctionne comme un charme.

0
votes

le problème est la marge dans votre classe .card, car la marge est ajoutée à l'espace entre les divs. Je change la marge à 0, vous pouvez utiliser un remplissage pour créer un espace entre votre carte de bordure et votre carte de contenu.

<div class="container">

  <div class="cards">
    <div class="card">
      <img src="./img/icon1.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon2.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon3.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon4.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon5.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
    <div class="card">
      <img src="./img/icon6.png" alt="" class="icon">
      <img src="./img/line-white.png" alt="" class="line">
      <p>bla</p>
    </div>
  </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

.container {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.cards-wrapper {
  background: orange;
}

.cards {
  background: blue;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.card {
  height: 225px;
  width: 370px;
  border: 1px solid red;
  margin: 0px 0px; //MARGIN 0
}

0 commentaires