Mise en page avec flexbox

Résolu
christian82000 Messages postés 47 Statut Membre -  
christian82000 Messages postés 47 Statut Membre -
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
A voir également:

1 réponse

Réponse 1 / 1
christian82000 Messages postés 47 Statut Membre
 
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
0