Flex-element ignorieren child-element

Ist es möglich, eine flex-element ignorieren, ein Kind-element, so ist es die grösse hat keinen Einfluss auf die anderen Elemente?

Zum Beispiel habe ich einen wrapper mit display: flex. Es hat einen header, Inhalt und Fußzeile.

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

Möchte ich den wrapper zu ignorieren, die header-Tags (header behoben werden, um den oberen Rand des Fensters). Der Artikel wird festgelegt, um flex: 1 so dauert es bis der rest des Raumes, zwingt die Fußzeile, die unten auf der Seite. Hier finden Sie einige Beispiel-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;
}

Ich weiß, ich könnte bewegen Sie einfach die Kopfzeile außerhalb des wrappers, aber ich habe eine Menge von bestehendem code, die machen das ein bisschen schwieriger. Ist das, was ich fordere, noch möglich?

InformationsquelleAutor der Frage Sean | 2016-10-03

  1. -2

    Wenn Sie erklären .wrapper als display:flex Sie automatisch implizit deklarieren Sie alle Ihre direkt untergeordneten Elemente werden display:flex-item. Sie können überschreiben die implizite Deklaration mit etwas so einfaches wie header { display: block; }

    InformationsquelleAutor der Antwort Carl Camera

  2. 24

    In Ihr .wrapper erklären flex-wrap: wrap. Dann für Ihre Kopf, können Sie den Stil flex-basis: 100% wird die Kraft alles andere unten unter dem header.

    InformationsquelleAutor der Antwort Adrian Barsby

  3. 0

    Können Sie flex-shrink: 0 auf die Kind-Elemente halten Sie schrumpfen, den container zu füllen. Und verwenden flex-wrap: wrap auf die container/wrapper, damit Ihre Kinder wickeln nach unten.

    InformationsquelleAutor der Antwort Alexander

  4. 0

    Wenn Sie versuchen, zu verwenden flex-direction:columndas einzige was ich gefunden habe, hilfreich ist die absolute Positionierung /mit der entsprechenden Polsterung.

    InformationsquelleAutor der Antwort Lucian Davidescu

Schreibe einen Kommentar