Et voici ce que j'aimerais obtenir via les media queries :
Donc pour la première figure, j'ai simplement un container en display:flex avec 3 blocs à l'intérieur.
Mais je ne vois pas comment faire pour ramener le bloc rose, en bas du vert.
Si je passe le container en flex-wrap:wrap, alors cela fonctionne. Mais si le contenu de la section est plus grand que celui de l'aside vert, cela ne créer un espace entre les deux aside...
Sinon tu peux voir de ce coté là ( j'ai juste un peu modifier un code trouver sur le forum pour essayer de me rapprocher de ta demande ) https://jsfiddle.net/e47seLm9/3/
Si jamais j'ai tord, hesite pas à venir m'en parler !!
Alors si tu veux un effet comme Twitter le mieux je pense est de passé par boostrap ( à la base crée par Twitter eux meme ), ca te permet d'avoir une disposition responsible de ta page pour plus avoir de probleme.
Si je comprend bien un truc dans ce genre, mais pas en %, parce qu'il n'y a rien de pire en responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<style type="text/css">
body{
width: 100vw;
height: 100vh;
margin:0;}
.container{
margin:auto;
height:82vh;
width: 100%;
display:flex;
flex-wrap:wrap;
}
.sec2{
width: 80%;
height: 80vh;
background-color:yellow;
}
.sec1{
width: 10%;
height:80vh;
background-color:green;}
.sec3{
width: 10%;
height:80vh;
background-color:gray;
}
@media screen and (max-width: 960px){
.container{
margin:auto;
height:82vh;
width: 100vw;
display:flex;
flex-wrap:wrap;
flex-direction: column;
}
.sec2{
order: 3;
width:0 auto;
height: 80vh;
background-color:yellow;
}
.sec1{
order: 1;
width: 20%;
height:40vh;
background-color:green;}
.sec3{
order: 2;
width: 20%;
height:40vh;
background-color:gray;
}
}
</style>
</head>
<body>
<div class="container">
<div class="sec1"></div>
<div class="sec2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, a. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem laboriosam praesentium pariatur tempora repudiandae, corporis quasi hic modi dignissimos eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quam alias accusantium possimus quisquam recusandae voluptatem est dolore vitae earum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, fugit.
</div>
<div class="sec3"></div>
</div>
</body>
</html>
- Edité par exen 23 juin 2017 à 2:04:31
Compos sui.
Flexbox - Placement
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Compos sui.