elemento Flex-direction. Non capisco il comportamento

[ivy_76]

Ciao a tutti

Ho un banale esercizio htm / css che mi manda fuori di testa. Cerco di spiegarmi il meglio possibile.

Devo realizzare una pagina html composta da vari blocchi (header / nav / figure) e posizionarli tramite CSS in questo modo.

-----------------------
< div class = 'page'> questo è il maxi contenitore che contiene tutti gli elementi della pagina

header (resta sopra a tutto)

nav (resta sx della pagina) +++ main (resta al centro) +++ figure (resta dx della pagina)


footer ( in fondo a tutto )
---------------------------------

Il testo dell'esercizio, tra le altre cose, dice: realizzare un css in questo modo:

Blocco < div > di classe 'page' fatto cosi:
Larghezza pagina :90%
Larghezza min:600px
Larghezza max:1280px
Altezza minima:120 vh
colore di sfondo: eeeeee
padding e margini = 0
flex 1 1
display: flex
direzione flex : colonna


che ho tradotto cosi:

.page{
    width:90%;
    min-width:600px;
    max-width:1280px;
    min-height:120vh;
    background-color:#eeeeee;
    padding:0px;
    margin:0px;
     
     display: flex;
       flex: 1 1 ;
 
       flex-direction:column;
      
}

allego ancora un pezzo del css

Il testo dice: creare un blocco < main > cosi:
- colore sfondo: bianco
- larghezza: 50%
- padding e margini: 5 px
- blocco flottante a sinistra
- flex 5 5

che ho tradotto cosi:

main{    background-color:white;
    width:50%;
    padding:5px;
    margin:5px;
    float:left;
    flex:5 5;
}

La Pagina html poi semplificandola al massimo è cosi:

<div class='page'>
    
         <header>
                Titolo <img src='img/logo.png' width='102' height='90'>
         </header>     
            
        <nav>
            <ul>
                <li><a href='index.html'>home</a></li>
                <li><a href='article.html'>archivio</a></li>
                <li><a href='contacts.html'>contatti</a></li>
            </ul>
        </nav>
            
        <main>
            <h1>Form di compilazione</h1>
            <form method="POST" action="mailto:info@miosito.universita.com" enctype="text/plain">
                Inserisci tuo cognome e nome: <input type='text' name='datiPersonali'><br>
                Inserisci la tua mail : <input type='text' name='email'><br>
                <input type ='submit' name='invia!'>
            </form>
        </main>
            
        <figure>
            <img id='logo' src='img/torretta.gif' width='150' height='150' alt=''>
            <figcaption><small>Didascalia</small></figcaption>
        </figure>
            
        <footer>
                autore: Pinco Pallino
        </footer>            
        
    </div>

Ma cosi facendo, gli elementi all'interno del DIV vengono incolonnati e mi è impossibile ad esempio mantenere l'elemento FIGURE a destra. Va a capo! Cosi come va capo anche MAIN.

Per cui mi domando ... è sbagliato il testo dell'esercizio (in quanto flex-direction:column mette in colonna gli elementi) oppure mi sfugge qualcosa?
Togliendo la parte relativa in grassetto nel CSS, gli elementi sono posizionati correttamente ma questo va contro il testo dell'esercizio!

Spero che qualcuno mi illumini

[VinzClortho]

sarebbe utile che ci fornissi un link al file su cui stai lavorando, e per altro il codice che fornisci non è completo (dov'è il css per gli elementi header, nav e figure?). Non riportando nemmeno tutto il testo dell'esercizio, non è chiaro se puoi ad esempio creare un box contenitore per gli elementi nav, main, figure. Visto così ad occhio mi sembra chiaro che flex-direction: column sull'elemento contenitore disponga in colonna il contenuto, ma ti segnalo che interpretare l'allineamento di un contenuto con la proprietà float è un errore, perchè la proprietà non si applica agli elementi flex item.

[ivy_76]

sarebbe utile che ci fornissi un link al file su cui stai lavorando, e per altro il codice che fornisci non è completo (dov'è il css per gli elementi header, nav e figure?). Non riportando nemmeno tutto il testo dell'esercizio, non è chiaro se puoi ad esempio creare un box contenitore per gli elementi nav, main, figure. Visto così ad occhio mi sembra chiaro che flex-direction: column sull'elemento contenitore disponga in colonna il contenuto, ma ti segnalo che interpretare l'allineamento di un contenuto con la proprietà float è un errore, perchè la proprietà non si applica agli elementi flex item.

Hai ragione provo ad integrare !

Per farla breve posto solo la parte relativa alla home page, in quanto le altre pagine sono identiche, salvo delle piccole modifiche nella parte -- MAIN --
A me interessa solo capire il comportamento come da titolo del post.

La realizzazione dell'esercizio è estremamente banale per cui non voglio farvi perdere tempo con tutto il resto.

Il testo richiede che ci sia una pagina INDEX composta da:

-- header --
Titolo (es. “Musei Vaticani”) e logo (logo Museo, immagine didimensioni max 80x100 pixel)

-- nav --

Una lista puntata non numerata che contenga i collegamenti alle tre pagine:
- Home -> torna a index.html
- Orari -> va a pagina page2.html
- Contattaci -> va a pagina page3.html

-- main --
Titolo dell’articolo (es. “I Musei vaticani”)

Testo dell’articolo (primi 200 caratteri del solito riempitore “Loremipsum…”) e link alla page2.html (testo "leggi tutto”)figure Una immagine in formato portrait 200x80 pixel (ad es. locandina di unaevento al Campus)

-- footer -- Testo “realizzato da : "


Le altre pagine non mi interessano, tanto sono tutte uguali a parte qualche dettaglio.

Il css invece deve avere queste caratteristiche:

TAG	Proprietà
< body > della pagina	Famiglie di font: Arial, Helvetica, sans-serif Dimensione del font: 12pt Colore di sfondo: #3C3C3C Altezza minima: 120 vh Padding: 5 px Margini: 0 px
Blocco < div > di classe “page”	Larghezza pagina: 90% Larghezza minima: 600 px Larghezza massima: 1280 px Altezza minima: 120 vh Colore di sfondo: #CCCCCC padding e margin uniformi pari a 0 flex: 1 1 display: flex direzione flex: colonna
Blocco < header >	Colore di sfondo: navy Colore: white Allineamento del testo: centrato Padding: 10 px
Blocco <nav>	Altezza linea: 30 px Colore di sfondo: #EEEEEE Altezza min: 100 vh Larghezza: 30% Blocco fluttuante a sinistra Padding uniforme pari a 5 px
Elemento <li> all’interno del blocco <nav>	Margine inferiore: 1.2em
Blocco <main>	Colore di sfondo: gray
Blocco <main>	Colore di sfondo: gray Larghezza: 50% padding e margin uniformi pari a 5 px blocco fluttuante a sinistra
Titoli interno al blocco < main >	Elemento <h1> dimensione font 20pt Elemento <h2> dimensione font 16pt
Blocco <figure>	Larghezza: 20% Blocco fluttuante a destra Allineamento testo: sinistra padding e margin uniformi pari a 15 px Clear: right Figcaption con dimensione font: smaller
Blocco <footer>	Colore di sfondo: navy Colore: bianco Clear: both Allineamento testo: centrato padding uniforme pari a 5 px

Quindi come ho già detto, inserendo nel css la parte in grassetto del DIV , class PAGE ottengo un allineamento non corretto del testo, omettendola invece, l'allineamento è ok


Questo infine è il codice del CSS

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12pt;
    background-color:#3c3c3c;
    min-height:120vh;
    padding:5px;
    margin:0px;
}


/* classe personalizzata */


.page{
    width:90%;
    min-width:600px;
    max-width:1280px;
    min-height:120vh;
    background-color:#cccccc;
    padding:0px;
    margin:0px;
     /*
    
    L'allineamento column fa si che i blocchi vengano posizionati in colonna falsando il corretto allineamento
    
    flex: 1 1;
    display:flex;
    flex-direction: column;
    */
}




header{
    background-color:navy;
    color:white;
    text-align:center;
    padding:10px;
}




nav{
    line-height:30px;
    background-color:#eeeeee;
    min-height:100vh;
    width:30%;
    float:left;
    padding:5px;
}


 
 
main {
    background-color:gray;
    width:50%;
    padding:5px;
    margin:5px;
    float:left;
    flex:5 5;    
}


main h1{
    font-size:20pt;
}


main h2{
    font-size:16pt;
}


figure {
    width:20%;
    float:right;
    text-align:left;
    padding:15px;
    margin:15px;
    clear:right;
    font-size:smaller;    
}




footer{
    background-color:navy;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}

[VinzClortho]

non mi è chiaro perchè nell'esercizio si fa questo ricorso al flexbox. Come ho già detto, la proprietà float è alternativa al flexbox, quindi o utilizzi l'una o l'altra. Inoltre l'uso di "flex: 1 1" sull'elemento contenitore è scorretto, perchè è una propreta dei flex item.
Puoi controllare anche tu su questa risorsa della guida flexbox di html.it.
Questo invece è un esempio funzionale di flexbox: i tre box vengono allineati orizzontalemente senza ricorrere al float.

[ivy_76]

non mi è chiaro perchè nell'esercizio si fa questo ricorso al flexbox. Come ho già detto, la proprietà float è alternativa al flexbox, quindi o utilizzi l'una o l'altra. Inoltre l'uso di "flex: 1 1" sull'elemento contenitore è scorretto, perchè è una propreta dei flex item.
Puoi controllare anche tu su questa risorsa della guida flexbox di html.it.
Questo invece è un esempio funzionale di flexbox: i tre box vengono allineati orizzontalemente senza ricorrere al float.

Non è chiaro neanche a me :-) Ecco perché ho chiesto sol forum! :-)

Molto utile la guida che mi hai passato, grazie 1000 e in effetti l'esempio riportato è chiaro.

Grazie ancora per il tuo tempo