web-dev-qa-db-fra.com

Faire en sorte que l'élément flex ignore l'élément enfant

Est-il possible de faire en sorte qu'un élément flex ignore un élément enfant afin que sa taille n'affecte pas les autres éléments?

Par exemple, j'ai un wrapper avec display: flex. Il a un en-tête, un contenu et un pied de page.

<div class="wrapper">
    <header></header>
    <article></article>
    <footer></footer>
</div>

Je veux que l'encapsuleur ignore la balise d'en-tête (l'en-tête sera fixé en haut de la fenêtre). L'article sera mis à flex: 1 _, il occupe donc le reste de l’espace, ce qui force le pied de page au bas de la page. Voici quelques exemples de CSS:

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 50px; /* Accounts for header */
}

header {
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
}

article {
    flex: 1;
}

footer {
    height: 50px;
}

Je sais que je pourrais simplement déplacer l'en-tête en dehors de l'emballage, mais j'ai beaucoup de code existant qui rendra cela un peu plus difficile. Est-ce que ce que je demande est même possible?

htmlcsshtml5flexbox
28
Sean

Dans votre .wrapper declare flex-wrap: wrap. Ensuite, pour votre en-tête, vous pouvez ajouter le style flex-basis: 100% qui forcera tout le reste en dessous de l'en-tête.

38
Adrian Barsby

Vous pouvez utiliser flex-shrink: 0 sur les éléments enfants pour les empêcher de se contracter pour remplir le conteneur. Et utilise flex-wrap: wrap sur le conteneur/emballage pour que vos enfants puissent envelopper.

1
Alexander

Si vous essayez d'utiliser flex-direction:column, la seule chose qui me soit utile pour cela est le positionnement absolu/avec le remplissage correspondant.

0
Lucian Davidescu