elemento Flex-direction. Non capisco il comportamento

[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;
}