flexbox combiner row et column ?

Le
Une Bévue
j'ai une page comme ça :

++
| header |
++
| main |
+--+ ++ +-+
| | | | | |
| nav1 | | nav2 | | Section |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+--+ ++ +-+
| main |
++
| footer |
++

Bon, l'espace main en dessus et en dessous des nav1, nav2 et section
n'est qu'un margin (5px qui compte pour du beuree).

le html est ainsi :

<header />
<div id="main">
<nav id="nav1"></nav>
<nav id="nav2"></nav>
<section></section>
</div>
<footer />


dans div id="main" j'occupe toute la largeur de la page avec :

#main {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#nav1 {
margin: 0 4px 0 0;
flex: 1 170px;
-webkit-flex: 5 170px;
flex: 5 170px;
-webkit-order: 1;
order: 1;
}
#nav2 {
margin: 0 4px 0 0;
-webkit-flex: 10 350px;
flex: 10 350px;
-webkit-order: 2;
order: 2;
}
#main > section {
-webkit-flex: 16 570px;
flex: 16 570px;
-webkit-order: 3;
order: 3;
}

ce qui me convient.

MAIS, j'aimerais combiner ce "flex-flow: row;" pour #main avec un
"flex-flow: column;" pour body

en ayant qqc comme

header et footer min-height à 22px
header collé en haut, footer collé en bas
et, pour main le reste.

est-ce possible avec flexbox ?
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #25937012
Le 13/01/14 16:09, Une Bévue a écrit :

est-ce possible avec flexbox ?




Je sais pas mais ...

l'intérêt des flex-boxes n'est-il pas surtout leur auto transformation
des columns sur les écrans d'ordis en rows sur les smartphones ?

et là alors que vont-ce t'elles devenir ces boxes si on en multiplie les
imbrications ???

enfin ... si toutefois j'ai bien compris ...

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le #25937722
Le 15/01/14 16:29, SAM a écrit :
Le 13/01/14 16:09, Une Bévue a écrit :

est-ce possible avec flexbox ?




Je sais pas mais ...

l'intérêt des flex-boxes n'est-il pas surtout leur auto transformation
des columns sur les écrans d'ordis en rows sur les smartphones ?

et là alors que vont-ce t'elles devenir ces boxes si on en multiplie les
imbrications ???

enfin ... si toutefois j'ai bien compris ...


Cordialement,



merci bien, je me suis effectivement basé sur Holy_Grail_Layout.

bon, j'ai le footer qui n'est pas en bas de la page, c'est tout.
Publicité
Poster une réponse
Anonyme