J'ai une structure de flexbox simple comme ci-dessous ..
p>
<div class="container">
<div class="item">
<h1>Item 1</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 2</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 3</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 4</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 5</h1>
<p>
This is some test content
<p>
</div>
</div>3 Réponses :
Supprimer la flexion Grow 1 sinon, ils se développeront pour remplir la ligne:
p>
<div class="container">
<div class="item">
<h1>Item 1</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 2</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 3</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 4</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 5</h1>
<p>
This is some test content
<p>
</div>
</div> réglage de cette manière, la partie flex: 1 0 21% essentiellement signifie réglage 21% est en fait inutile, Comme vous l'avez défini pour développer mais beaucoup, il peut faire partie de la ligne ( Flex-Grow: 1 ). Pour le réparer, il vous suffit de définir flex-base sur un pourcentage, sans définir les autres. Faites-le en définissant flex-base: 21% directement.
J'ai aussi un moyen de définir la largeur, je ne sais pas si c'est ce que vous voulez.
p>
<div class="container">
<div class="item">
<h1>Item 1</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 2</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 3</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 4</h1>
<p>
This is some test content
<p>
</div>
<div class="item">
<h1>Item 5</h1>
<p>
This is some test content
<p>
</div>
</div>