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 peux pas afficher 3 éléments dans le conteneur flexible en 2 lignes, une dans la première ligne et les deux autres dans la deuxième ligne. Ceci est le CSS pour le conteneur flexible. 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 défini sur wrap , les 3 éléments sont affichés dans une colonne. Je pensais que le paramètre wrap é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 toute 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 suis vraiment pas sûr de la combinaison de commandes à utiliser. Toute aide serait la bienvenue car je suis perplexe.

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%; } 
 
Hi
Hello
Hello 2

La réponse donnée par Nico O est correcte. Cependant, cela n’obtient 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 cette discussion, mais cela pourrait avoir quelque chose à voir avec la manière dont IE restitue la boîte aux lettres ou quelque chose du genre.

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

 display: inline-block; 

aux articles.