Sujet Précédent Sujet Suivant

Mise en page avec flexbox

Résolu/Fermé
christian82000 Messages postés 47 Date d'inscription dimanche 27 décembre 2009 Statut Membre Dernière intervention 17 septembre 2020 - 13 déc. 2018 à 16:32
christian82000 Messages postés 47 Date d'inscription dimanche 27 décembre 2009 Statut Membre Dernière intervention 17 septembre 2020 - 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
A voir également:

1 réponse

Réponse 1 / 1
christian82000 Messages postés 47 Date d'inscription dimanche 27 décembre 2009 Statut Membre Dernière intervention 17 septembre 2020
20 déc. 2018 à 14:02
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