header , nav e flex

[Gae]

Salve sto imparando l'uso dei css e ho trovato interessante la proprietà flex
Ho un header in cui visualizzo il logo e la scritta del sito uno di fianco all'altro.
Mi serve inserire un menù di navigazione, sempre all'interno dell'header, che però dovrebbe andare a capo sotto l'immagine.
Ho fatto varie prove ma non sono riuscito a farlo.
Quello che serve a me si realizza in maniera diversa ?
Posto il codice

<header class='header'>
    <!-- Contenuto dell'intestazione -->
    <a href='BE'> <img src="{% static 'Pale/Img/logo.png' %}" alt="Visualizza" title="Pagina Principale"> </a>
    {% block inte %} Gestione  {% endblock %}
    INTESTAZIONE
<nav class='menuToolBar'>
            <!-- Contenuto del menu di navigazione -->
            <ul>
                <li> <a href='/BE'>Home</a> </li>
                <li> <a href='#'>Servizi</a> </li>
                <li> <a href='#'>Contatti</a> </li>
                <!-- Altri elementi del menu -->
            </ul>
    </nav>
</header>

.header {
    display: flex;
    align-items: center;
    color: var(--header-fg);
    background-color: var(--header-bg);
}

.header .menuToolBar {
    display: flex;
    flex-wrap: wrap;
   flex-direction: column; /* Visualizza gli elementi del menuToolBar in una colonna */
    align-items: center; /* Centra gli elementi del menuToolBar orizzontalmente */

 list-style-type: none;
margin: 10px;
}

.header .menuToolBar ul {
    list-style-type: none;
padding: 0;
margin: 0;
}

.header .menuToolBar ul li {
display: inline-block;
    margin-right: 10px;
}

.header .menuToolBar ul li a {
text-decoration: none;
    color: orange;
}

 

[WmbertSea]

Ciao, è importante considerare che flexbox è unidimensionale, cioè agisce su una sola dimensione per volta.

Dal momento che vuoi disporre gli elementi sia in orizzontale (logo e scritta) sia in verticale (il menu che deve andare a capo) può essere necessario avvolgerli in contenitori distinti.

Il codice che hai postato non è sufficiente per comprendere come si possa intervenire in maniera precisa,, servirebbe un esempio minimo ma completo con cui poter riprodurre l'esatto scenario.

Ad ogni modo suppongo che sia necessario principalmente avvolgere logo e scritta, assieme, dentro un contenitore (può essere un semplice div). Questo div può essere quindi impostato con flex orizzontalmente, mentre .header dovrà essere impostato con flex verticalmente, in modo che i due elementi (il div e il nav) siano disposti uno sotto l'altro (cioè il nav andrà praticamente a capo).

Partirei da questo principio, eventualmente il resto si potrà valutare meglio.
Fai magari qualche prova e vedi cosa riesci ad ottenere.

Se trovi difficoltà ti invito a postare un esempio completo o il link della pagina in questione così da poter avere un riscontro diretto.

 

[Gae]

Ti ringrazio della spiegazione. In base a quel che mi hai detto farò delle prove
Grazie