Menu

Mise en page avec flexbox [Résolu]

Messages postés
26
Date d'inscription
dimanche 27 décembre 2009
Statut
Membre
Dernière intervention
20 décembre 2018
- - Dernière réponse : christian82000
Messages postés
26
Date d'inscription
dimanche 27 décembre 2009
Statut
Membre
Dernière intervention
20 décembre 2018
- 20 déc. 2018 à 14:02
Bonjour,
j'ai une page d'accueil organisée comme le montre le dessin ci-joint, actuellement codée avec float:




Je voudrais faire disparaître l'espace qui apparaît entre div, variable selon la hauteur de la div voisine.

J'ai essayé en utilisant flexbox:

<head>
.conteneur
{
	display:inline-flex;                    /*permet de se ranger à droite de edito*/
	flex-direction:column;             /*on prend pour axe principal l'axe vertical*/
	flex-wrap:wrap;                        /*retour à la ligne si contenant trop petit*/
	align-items:flex-start;             /*on aligne sur la ligne de départ*/
	width:55%;                               /*dimensions et caractéristiques du contener*/
	height:auto;
	margin:0px;
	}	

.edito
{	
       width:40%; 
	height: auto; 
	background-color:#5EB6DD;
	border: 1px solid red; 
	padding:0px 10px 10px 10px; 
	margin: 0px;
	}
.element
{
       width:40%; 
	height: auto; 
	background-color:#5EB6DD;
	border: 1px solid red; 
	padding:0px 10px 10px 10px; 
	margin: 0px;
	}
</head>

<body>
<header></headert>
<nav></nav>

<div class="edito"></div>

<div class="conteneur">
      <div class="élément"></div>
      <div class="élément"></div>
      <div class="élément"></div>
      <div class="élément"></div>
      <div class="élément"></div>
</div>




Mais le problème n'est pas résolu.
Quelqu'un a-t-il une idée?
Merci d'avance.

Christian
Afficher la suite 

Votre réponse

1 réponse

Messages postés
26
Date d'inscription
dimanche 27 décembre 2009
Statut
Membre
Dernière intervention
20 décembre 2018
0
Merci
Bonjour,
J'ai finalement résolu la difficulté. Il suffisait de regrouper "Edito" et "conteneur" dans un même conteneur, puis de bloquer chaque colonne dans un conteneur différent, ayant notamment comme propriété "flex-direction : column" et "align-items : baseline".
@ plus
Christian
Commenter la réponse de christian82000