perché devo dire ai bambini di mostrare il flex quando ho già impostato il genitore al flex? - css, genitore-figlio, flexbox

per esempio se il .nav-flex è il genitore, perché i miei stili di flessione non sono presenti per gli elementi di ancoraggio di mio figlio. Devo VISUALIZZARE: FLEX sull'elemento di ancoraggio bambino per farlo apparire flessibile.

(genitore )

.nav-flex  {
display: flex;
flex-direction: row;
}

(bambino) /devo inserire il display: flettere qui per flettere al lavoro/

a {
list-style-type: none;
text-decoration: none;
flex-grow: 1;
justify-content: space-around;
}

risposte:

Il modello di box di layout flessibile ha due concetti:

• Contenitori Flex

  UN contenitore flessibile è il riquadro generato da un elemento con a calcolato display di flex o inline-flex.

• Articoli Flex

  Vengono chiamati bambini in flusso di un contenitore flessibile articoli flessibili e sono disposti utilizzando il modello di layout flessibile.

Perciò, .nav-flex { display: flex } rende il .nav-flex un contenitore flessibile e rende il a all'interno di articoli flessibili.

Da a sono elementi flessibili, flex-grow: 1 li farà crescere per riempire tutto il .nav-flex.

Però, justify-content si applica solo ai contenitori flessibili, quindi non funziona.

Invece, penso che tu voglia uno di questi (sono equivalenti):

• Dal momento che il a Gli elementi flessibili stabiliscono un nuovo contesto di formattazione dei blocchi per i suoi contenuti, è possibile centrare il contenuto a livello di linea utilizzando text-align:

  .nav-flex  {
  display: flex;
  }
  a {
  flex-grow: 1;
  text-align: center;
  }

  <nav class="nav-flex"><a>Home</a><a>About</a><a>Contact</a></nav>

• Rimuovi il flex-grow: 1 per prevenire il a dalla crescita, e usare il justify-content: space-around sopra .nav-flex per allinearli correttamente:

  .nav-flex  {
  display: flex;
  justify-content: space-around;
  }

  <nav class="nav-flex"><a>Home</a><a>About</a><a>Contact</a></nav>

• Fare il a flettere gli oggetti in modo che il loro contenuto di testo sia avvolto in un oggetto flessibile e allinearlo con justify-content:

  .nav-flex  {
  display: flex;
  }
  a {
  flex-grow: 1;
  display: flex;
  justify-content: center; /* Or space-around */
  }
  

  <nav class="nav-flex"><a>Home</a><a>About</a><a>Contact</a></nav>