flexbox combiner row et column ?

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 ?

---

• Partager ce contenu :