web-dev-qa-db-fra.com

CSS flex, comment afficher un élément sur la première ligne et deux sur la ligne suivante

C'est une question assez simple, je suppose, mais je ne parviens pas à afficher 3 éléments dans le conteneur flex sur 2 lignes, une sur la première et les 2 autres sur la deuxième. C'est le CSS pour le conteneur flex. Il affiche les 3 éléments sur une seule ligne, évidemment :)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

Si flex-wrap est réglé sur wrap, les 3 éléments sont affichés dans une colonne. Je pensais que le paramètre d'emballage était nécessaire pour afficher les éléments de conteneur sur plusieurs lignes. J'ai essayé ce CSS pour le premier élément de conteneur, avec l'intention de l'occuper tout au long de la première ligne, mais cela n'a pas fonctionné

div.intro_item_1 {
  flex-grow: 3;
}

J'ai suivi les instructions de "CSS-Tricks" mais je ne sais vraiment pas quelle combinaison de commandes utiliser. Toute aide serait la bienvenue car cela me laisse perplexe.

cssflexbox
63
RoyS

Vous pouvez faire quelque chose comme ça:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}
<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

Voici une démo: http://jsfiddle.net/7357474emn/1/

Ce modèle repose sur le retour à la ligne après qu'une "rangée" est pleine. Comme nous définissons le flex-basis du premier élément sur 100%, il remplit complètement la première ligne. Attention particulière sur le flex-wrap: wrap;

107
Nico O

La réponse donnée par Nico O est correcte. Cependant, cela ne donne pas le résultat souhaité sur Internet Explorer 10 à 11 et Firefox.

Pour IE, j'ai trouvé que changer

.flex > div
{
   flex: 1 0 50%;
}

à

.flex > div
{
   flex: 1 0 45%;
}

semble faire l'affaire. Ne me demandez pas pourquoi, je ne suis pas allé plus loin dans ceci, mais cela pourrait avoir quelque chose à voir avec la façon dont IE rend la boîte à bordure ou quelque chose du genre.

Dans le cas de Firefox, je l'ai résolu en ajoutant

display: inline-block;

aux articles.

8
Peter Waegemans