Die richtige Verwendung von flex-Eigenschaften bei flex-Container verschachteln

Ich habe Probleme, mich mit flexbox richtig und wollte eine Klarstellung, wie das verschachteln von übergeordneten und untergeordneten Elementen arbeitet.

Ich weiß, dass das Kind erbt die übergeordneten flex. Aber nicht, dass überschrieben werden, wenn Sie brauchen, um die flex-a-Kind für Ihre Kinder (baby)? Was ist die richtige Verwendung von flexbox?

Wann muss ich mich bewerben display: flex dem Kind für seine Kindes (baby ' s) Willen, oder wird das überschrieben Elternteil des Kindes flex?

.parent-container {
  display: flex;
  flex: 1 0 100%;
}
.child-container {
  flex: 1 1 50%
}
.baby-of-child-container {
  flex: 1 1 50%;
}
<div class='parent-container'>
  <div class='child-container'>
    <div class='baby-of-child-container'></div>
    <div class='baby-of-child-container'></div>
  </div>
  <div class='child-container'>
    <div class='baby-of-child-container'></div>
    <div class='baby-of-child-container'></div>
  </div>
</div>
Ich denke Enkel ist, einen besseren Weg zu beschreiben, diese

InformationsquelleAutor CoffeePeddlerIntern | 2016-06-15

  1. 34

    Rahmen einer flex formatting context beschränkt sich auf eine Eltern - /Kind-Beziehung.

    Dies bedeutet, dass ein flex-container ist immer der Elternteil und einem flex-Element ist immer das Kind. Flex-Eigenschaften funktionieren nur innerhalb dieser Beziehung.

    Nachkommen eines flex-container über die Kinder sind nicht Teil des flex-layout und nicht zu akzeptieren "flex-Eigenschaften".

    Werden Sie immer anwenden müssen display: flex oder display: inline-flex zu einem Elternteil im Hinblick auf die Anwendung der flex-Eigenschaften auf das Kind.

    Gibt es bestimmte flex-Eigenschaften, die gelten nur für flex-Containern (z.B. justify-content, flex-wrap und flex-direction), und es gibt bestimmte flex-Eigenschaften, die gelten nur für flex-Elemente (z.B. align-self, flex-grow und flex).

    Jedoch, die flex-items lassen sich auch flex-Containern. In solchen Fällen kann das element akzeptieren alle flex-Eigenschaften. Wobei jede Eigenschaft führt eine andere Funktion, es gibt keine internen Konflikt und muss nichts überschrieben werden.

    Manchmal sind wir beraten, gelten flex:1 oder flex-grow: nicht nur die Eltern, sondern für alle Vorfahren. Ich ' ll halten Sie ein Auge für die Antworten, mit Rat und link einige hier. Das verwirrt wichtig für mich, also denke ich tut es auch für andere.
    In dem Fall Reagieren Nativen, im Grunde die gesamte layout besteht aus flex, die ich habe versucht, den Fokus auf in meiner eigenen verknüpft mit Frage. Also in RN sind die meisten Komponenten in der Tat sowohl von Containern als auch Kinder. Ich bin neu in RN und nie gearbeitet, mit flex auf dem web also nicht wissen, ob es Häufig in im web um mit flex für die Mehrheit der das layout in einem tief verschachtelten Art und Weise, wie es in RN daher bitte ich jemand mit flex-know-how, sondern vor allem diejenigen mit React Native flex-know-how.

    InformationsquelleAutor Michael_B

Schreibe einen Kommentar