Mise en page Flex Layout


header

Nunc vehicula consequat libero, et pretium elit luctus et. Nulla facilisi. Vivamus elementum mi nunc, vitae volutpat elit interdum eget. Duis sem dolor, semper at eleifend vitae, commodo vitae nisl. Suspendisse lacinia vestibulum faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus tellus dui, ac aliquet mi faucibus a.

Nunc vehicula consequat libero, et pretium elit luctus et. Nulla facilisi. Vivamus elementum mi nunc, vitae volutpat elit interdum eget. Duis sem dolor, semper at eleifend vitae, commodo vitae nisl. Suspendisse lacinia vestibulum faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus tellus dui, ac aliquet mi faucibus a.

Nunc vehicula consequat libero, et pretium elit luctus et. Nulla facilisi. Vivamus elementum mi nunc, vitae volutpat elit interdum eget. Duis sem dolor, semper at eleifend vitae, commodo vitae nisl. Suspendisse lacinia vestibulum faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus tellus dui, ac aliquet mi faucibus a.

Rubrique1
Rubrique2
Rubrique3
Rubrique4
footer

👉 Support navigateurs :

Chrome Edge firefox Internet Explorer Opera Safari UC Browser Samsung Internet
Chrome-logo Edge Browser-logo firefox-logo Internet Explorer-logo Opera-logo Safari-logo UC Browser-logo Samsung Internet-logo
✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
29+ 12+ 28+ Support partiel 17+ 9+ Support partiel 4+


<header>header</header>
<nav>
<a href="#">Rubrique</a>
<a href="#">Rubrique</a>
<a href="#">Rubrique</a>
<a href="#">Rubrique</a>
</nav>
<div class=contenu>
<article>
<p>Nunc vehicula consequat libero, et pretium elit luctus et. Nulla facilisi. Vivamus elementum mi nunc, vitae volutpat elit interdum eget. Duis sem dolor, semper at eleifend vitae, commodo vitae nisl. Suspendisse lacinia vestibulum faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus tellus dui, ac aliquet mi faucibus a.</p>
<p>Nunc vehicula consequat libero, et pretium elit luctus et. Nulla facilisi. Vivamus elementum mi nunc, vitae volutpat elit interdum eget. Duis sem dolor, semper at eleifend vitae, commodo vitae nisl. Suspendisse lacinia vestibulum faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus tellus dui, ac aliquet mi faucibus a.</p>
<p>Nunc vehicula consequat libero, et pretium elit luctus et. Nulla facilisi. Vivamus elementum mi nunc, vitae volutpat elit interdum eget. Duis sem dolor, semper at eleifend vitae, commodo vitae nisl. Suspendisse lacinia vestibulum faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus tellus dui, ac aliquet mi faucibus a.</p>
</article>
<section>
<div>Rubrique1</div>
<div>Rubrique2</div>
<div>Rubrique3</div>
<div>Rubrique4</div>
</section>
<aside>aside</aside>
</div>
<footer>footer</footer>




*{box-sizing: border-box}

body{margin: 0}

header,
footer{
display: flex;
justify-content: center;
align-items: center;
border-radius: .3rem;
margin: 4px;
padding: .5rem;
min-height: 100px;
color:#fff;
background-color: #7A5FFF}
	
article,
section,
aside{
border-radius: .3rem;
min-height: auto;
border: 1px solid #ddd}
	


	
article p{padding: 10px}
	
section div {
border: 1px solid #ccc;
padding: .25rem;
margin: .25rem;
display: flex;
justify-content: center;
align-items: center}
	
nav{

display: flex;
flex-direction: column;	

}
	
nav a {
background: linear-gradient(
to left,#7A5FFF,
#01FF89) no-repeat,#1b3645;
color: white;
display: flex;
justify-content: center;
margin: 5px;
padding: 15px;
border-radius: .3rem;
text-decoration: none;
transition: background-size .2s ease-in-out;
background-size: 100% 0}


article,
section,
aside{
	
margin: .25rem;
padding: 5px
	
}	

	
	
@media screen and (min-width: 37.5rem){
	
.contenu{
	
display:flex
	
}


nav{
	
flex-flow: row;
flex: 1

}
	
nav a{
	
flex: 1

}
	
article {

flex:3
	
}
	
section {
	
flex: 1;
order: -1
	
}	
	
aside{flex: 1}
	
}
@media screen and (min-width: 62.75rem){	

nav a:hover{
	
background-size:100% 100%
	
}
	
 }

👉 Aller plus loin avec Flexbox :

Guide complet flexbox (FR)🔗

Autre article (EN)🔗 intéressant et très pédagogique.

Quelques exemples flexbox sur Codepen🔗

Voir sur ce blog : menu avec flexbox

Outil en ligne pour créer automatiquement des éléments avec Flexbox.🔗 Pratique et gain de temps assuré.

Article (EN)🔗 de Jake Archibald contre l'utilisation de ce mode de mise en page.