Ciao a tutti ragazzi
in questi giorni sto studiando il flexbox con la guida di Cesare Lamanna.
Mi sono bloccato con questa lezione http://www.html.it/pag/53460/usare-l...per-il-mobile/ perchè non mi viene in nessun modo come nella demo http://www.html.it/guide/esempi/flex...lex-width.html
cioè utilizzando width:33.3% non mi vengono i 3 box iniziali su una sola riga, ma me ne vengono solo due.
Il bello è che da come si capisce, non ci è fatto una grossa modifica del file .css rispetto alla lezione precedente, quindi non capisco proprio cosa dovrei fare.
Caricherei una pagina web, ma non ho trovato la guida su come fare e quindi vi copio i miei codici.
il codice html è questo: e non ho modificato nulla dalla lezione precedente, quindi dovrebbe essere OK:
codice:<!DOCTYPE html> <head> <title>centrare elementi con flexbox</title> <link href="griglia5conwidth.css" rel="stylesheet" type="text/css" > </head> <body> <div class="container"> <!-- creiamo un header con dentro in box per il logo--> <header class="main-header"> <div class="logo"> <h1 class="logo-heading">The Flexbox</h1> </div> </header> <p>Allineare elementi flessibili con i margini automatici</p> <nav class="main-nav"> <ul class="main-menu"> <li class="menu-item"><a class="menu-link" href="#">home</a></li> <li class="menu-item"><a class="menu-link" href="#">italia</a></li> <li class="menu-item"><a class="menu-link" href="#">mondo</a></li> <li class="menu-item"><a class="menu-link" href="#">politica</a></li> <li class="menu-item"><a class="menu-link" href="#">economia</a></li> <li class="menu-item"><a class="menu-link" href="#">tecnologia</a></li> <li class="menu-item"><a class="menu-link" href="#">cultura</a></li> </ul> <form class="modulo-ricerca"> <input type="text" placeholder="Cerca" class="campo-ricerca"> </form> </nav> <p>QUI C'E' IL CONTENUTO DELLA PAG</p> <!--QUI C?é IL CONTENUTO DELLA PAG--> <p>Colonne affiancate con altezza uguale</p> <p>Nella Sezione ho tre blocchi div card-container che rappresentano le tre colonne.<br>All'interno di ognuna ci sono due div: una per l'immagine (card-image) e l'altra per il contenuto (card-content)</p> <section class="cards"> <div class="card-container"> <div class="card-image"><img src="HTML.it - CSS - Layout a griglia con Flexbox_files/card- img.png"></div> <div class="card-content"> <h4>Card 1</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <a href="http://www.html.it/guide/esempi/flexbox/7.%20colonne-nowrap.html#" class="btn btn-primary btn- blockmgtop-auto">Leggi l'articolo</a> </div> </div> <div class="card-container"> <div class="card-image"><img src="HTML.it - CSS - Layout a griglia con Flexbox_files/card- img.png"></div> <div class="card-content"><h4>Card 2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> <a href="http://www.html.it/guide/esempi/flexbox/7.%20colonne-nowrap.html#" class="btn btn-primary btn-block mgtop-auto">Leggi l'articolo</a> </div> </div> <div class="card-container"> <div class="card-image"><img src="HTML.it - CSS - Layout a griglia con Flexbox_files/card- img.png"></div> <div class="card-content"><h4>Card 3</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href="http://www.html.it/guide/esempi/flexbox/7.%20colonne-nowrap.html#" class="btn btn-primary btn-block mgtop- auto">Leggi l'articolo</a> </div> </div> <div class="card-container"> <div class="card-image"><img src="HTML.it - CSS - Layout a griglia con Flexbox_files/card- img.png"></div> <div class="card-content"> <h4>Card 4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <a href="http://www.html.it/guide/esempi/flexbox/7.%20colonne-nowrap.html#" class="btn btn-primary btn- blockmgtop-auto">Leggi l'articolo</a> </div> </div> <div class="card-container"> <div class="card-image"><img src="HTML.it - CSS - Layout a griglia con Flexbox_files/card- img.png"></div>
il codice CSS invece è minimamente modificato come appunto dice la guida con l'eliminazione della proprietà flex nel card-container
codice:.main-header{ display:flex; display: -webkit-flex; align-items:center; -webkit-align-items:center; justify-content:center; -webkit-justify-content:center; height:160px; background-color:#004480; } /*Anzitutto azzero la lista: cioè tolgo i punti e resetto padding e margin*/ ul{ list-style-type:none; /*definisce il tipo di punti elenco da usare*/ padding:0; margin:0; } /*imposto colore di sfondo del main-nav con il bordo per capire*/ .main-nav{ background-color:#67b4f8; border-bottom:1px solid #333; } /*Agiamo sul box contenitore, la lista con classe .main-menu*/ .main-menu{ display:flex; display: -webkit-flex; /*con questa regola gli item sono disposti orizzontalmente, uno accanto all'altro. Non ci rimane che agire sui link contenuti nei li per dare l'aspetto visuale che vogliamo*/ } .menu-link{ font-weight:bold; color:#fff; display:block; /*rendo i link come elmenti block*/ padding:10px; } .menu-link:hover{ background-color:#51caf3; /*faccio colorare diversamente i piccoli div intorno alle parole*/ color:#fff; /*faccio colorare diversamente le parole*/ } /*Fino a qui abbiamo impostato la barra di navigazione.*/ /*Ora poichè abbiamo aggiunto un campo per la ricerca di un sito, dobbiamo gestirlo*/ /*Poichè è un elemento blocco si collocherà su una nuova riga. Vogliamo allinearlo accanto al menu, quindi dovremo agire sull'elemento che contiene entrambi */ /*agiamo quindi su .main-nav aggiungendoci la regola display:flex*/ .main-nav{ display:flex; display: -webkit-flex; } /*Dobbiamo ancora allinearlo a destra*/ /*Basta usare la proprietà di margine opposta al lato su cui vogliamo allineare e dare il valore auto*/ .modulo-ricerca{ margin-left:auto; } /*Colonne affiancate con altezza uguale*/ /*I tre box (colonne) della semplice griglia sono contenuti in un elemento con classe .cards*/ .cards { display: flex; display: -webkit-flex; flex-flow: row wrap; /*EDIT*/ -webkit-flex-flow: row wrap; /* (row) gli elementi si dispongono su una riga e (nowrap) impediamo agli elementi di disporsi si più righe. EDIT: CON WRAP PERMETTIAMO CHE GLI ELEMETNI SI DISPONGONO SU PIù RIGHE*/ align-items: stretch; -webkit-align-items: stretch; /*è di default, ma lo specifico: colonne occupano tutto lo spazio disponibile ed avranno altezza uguale*/ justify-content: space-between; -webkit-justify-content: space-between; /*gli item così si dispongono orizzontalmente creando un spaziatura proporzionale tra di loro*/ margin-top: 10px; } /*Vogliamo anche che il pulsante posto in basso sia ancorato sempre sul fondo del box*/ /*Dobbiamo lavorare sui singoli componenti della griglia e non semplicemente sul loro contenitore*/ /*Perciò passiamo ai box che compongono la griglia. Questi sono definiti da un div con classe .card-container*/ .card-container { display: flex; /*vogliamo che gli elementi che contiene siano flessibili*/ display: -webkit-flex; flex-direction: column; /*tali elementi si dispongono verticalmente*/ -webkit-flex-direction: column; /*flex:1 1 300px; EDIT -webkit-flex: 1 1 300px; EDIT*/ width:33.3%; /*EDIT*/ margin-top:10px; /*EDIT*/ padding:10px; /*EDIT*/ } /*ogni box è suddiviso in due blocchi. Il primo ospita un'immagine flessibile che si adatta automaticamente alla larghezza del suo contenitore*/ .card-image img { display: block; height: auto; margin: 0 auto; max-width: 100%; width: 100%; } /*Il contenuto più problematico è quello con il contenuto testuale identificato dalla classe .card-content. Dato che questo contenuto è variabile e che da esso dipende l'altezza reale del div che contiene il testo ed il pulsante, quest'ultimo verrà a collocarsi ad altezze diverse.*/ /*Abbiamo altezze uguali per i box, ma il pulsante non è ancora sul fondo*/ /*Per risolvere, possiamo ricorrere al margine automatico applicato a margin-top visto che vogliamo un allinemaneto sul lato inferiore. */ /* Ma questo non è sufficiente perchè quando operiamo in verticale, avendo come riferimento l'altezza e non la larghezza abbiamo come riferimento l'altezza e non la larghezza, perciò è necessatio fornire un riferimento, un contesto di posizionamento, uno spazio in verticale rispetto al quale il pulsante possa collocarsi sul fondo del suo contenitore*/ /*Quindi per il div .card-content bisogna assegnare insieme a margin-top:auto anche flex:1 che serve a dire: cresci ed espanditi fino ad occupare tutto lo spazio disponibile. */ .card-content { display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; flex:1; -webkit-flex:1; padding: 10px 0; } .mgtop-auto { margin-top: auto; } /*il div con l'immagine .card-image non è flessibile, ha flex-grow impostato su0, per cui occuperà verticalmente lo spazio dettato dal suo contenuto*/ /*Il div con il testo .card-content ha con la proprietà flex, un flex-grow:1 che lo fa diventare flessibile per fargli occupare tutto lo spazio disponibile. Questo crea anche un contesto per l'altezza che ci consente di applicare l'allineamento in basso con margin-top:auto*/
Rispondi quotando
Originariamente inviata da ResianTaxidrive
