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 ?
++
| 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 ?
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
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.