28172 sujets

CSS et mise en forme, CSS3

Div à la ligne en flexbox (mobil)

Bonjour

J’essaie de faire passer une div à la ligne (flex) en version mobil sur cette page http://goxo.eu/flex/essai.html

la div 3 sous la div 2 occupant tout l'espace, je m'embrouille les neurones avec flex ... Smiley rolleyes

Un ptit conseil ne serait pas de trop, merci.

Bonne journée

<style type="text/css">
.contenair{background-color:#fff;margin:auto}
header {display:flex;flex:1}
.column2 {flex:1;padding:1rem;background-color:red;}
.column3 {flex:1;padding:1rem;background-color:yellow;}
img {display:block;margin:auto}
figure{padding:0;margin:0;}
section img{width:100%;height:auto}
@media (min-width: 750px) 
{.index{background:url(images/fond.jpg) no-repeat center fixed;background-size:cover;background-attachment: fixed}
#wrapper,footer,header {display:flex;flex:1}
.column1 {width:170px}
.column2 {flex:1.5;}
.column3 {flex:1;}
section {flex:1}
}
@media (min-width: 900px) 
{.contenair{width:70%;}}
@media (max-width: 1600px) 
{.contenair{max-width:1280px;}}
</style>


<body class="index">
<div class="contenair">
<header>
<div class="column1"><figure><img src="img/locations.png" alt=""/></figure> </div>
<div class="column2">2</div>
<div class="column3">3<br>
sous div 2 en version mobil</div>
</header>
<nav>menu</nav>
<div id="wrapper">
<section>
  <div><figure><img src="images/nivelle.jpg" width="600" height="250" alt=""/></figure></div>
  <div>ntellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M. Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te </p></div>
</section>
<section>
  <div><figure><img src="images/contrat.jpg" width="600" height="250" alt=""/></figure></div>
  <div>
    <p>ntellectum est enim mihi quidem in multis, et maxime in me ipso, sed   paulo ante in omnibus, cum M. Marcellum senatui reique publicae   concessisti, commemoratis praesertim offensionibus, te auctoritatem   huius ordinis dignitatemque rei publicae tuis vel doloribus vel   suspicionibus anteferre. </p>
  </div>
</section>
</div>
<div class="footer">footer</footer>
</div>
<script src="jquery.js"></script>
</body>

Modifié par africa (17 Nov 2016 - 07:17)
Administrateur
Hello,

Les éléments flex-items ne pourront aller à la ligne que si tu indiques explicitement un flex-wrap: wrap; sur le parent.

Bonne chance Smiley smile
Sujet clos
Aller à