web-dev-qa-db-fra.com

Organiser 2 éléments par ligne en utilisant flexbox

Imaginez que j'ai le balisage suivant

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

et le style

.item {
  width: 100%
}

et pour certaines raisons, je ne peux pas changer la largeur du .item Puis-je organiser 2 éléments dans chaque ligne en appelant le conteneur parent .container, en utilisant flexbox ou tout autre moyen?

htmlcsscss3flexbox
15
PranavPinarayi

vous pouvez donner flex: 0 50% aux enfants divs sans toucher .item

.item {
  width: 100%
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 0 50%;
  /*demo*/
  border: red solid;
  box-sizing:border-box
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

34
dippas

En supposant que la propriété width ne doive pas être changée, je peux penser à quelques solutions possibles, la première étant fit-content qui supporte incroyablement mal le navigateur. Le second est le positionnement d’utilisation, ce qui est également une mauvaise idée en raison de sa nature capricieuse et de sa probabilité d’échec sur différentes tailles d’écran.

Maintenant, les deux derniers sont très similaires, l’un consiste à utiliser deux conteneurs, donnez-leur display:inline;, donnez-leur une largeur limitée et remplissez-les avec des éléments. Si vous n'avez pas remarqué, il s'agit essentiellement d'une table 2 × 1.

Enfin, vous pouvez créer un tableau 2 × 1, et bien que ce soit probablement la solution la plus simple, c’est une mauvaise idée de prendre l’habitude d’utiliser des tableaux pour positionner des éléments autres que les formulaires et les tableaux. Cependant, c'est une option que je vous proposerai.

Bonne chance!

0
Ben