Lezione 4 (aa 2018-2019)

float

• Un elemento di tipo blocco (display:block) interrompe il flusso naturale della pagina anche se non ne occupa tutta la larghezza. Le proprietà float consente agli elementi che seguono l'elemento blocco di affiancarsi all'elemento stesso, a destra o a sinistra se lo spazio rimanente nella pagina lo consente.
• Il valore di float può essere:
  • left: L'elemento si colloca a sinistra nella pagina e gli elementi che seguono lo affiancano a destra.
  • right: L'elemento si colloca a destra nella pagina e gli elementi che seguono lo affiancano a sinistra.
  • none: (valore di default) l'elemento non consente il float.

img {
    float : right;
    margin: 0 0 15px 15px;
}

clear

• Le proprietà clear consente di interrompere il flusso float
• Il valore di clear può essere:
  • left: Interrompe il float a sinistra.
  • right: Interrompe il float a destra.
  • both: Interrompe il float sia sinistra che a destra .

div.clear {
    float : none;
    clear: both;
}

.clearfix

• Spesso è un problema interrompere correttamente il flusso float se gli elementi non sono della stessa altezza. In rete si trova questo trucco. Assegnando la classe clearfix ad un elemento che contiene elementi float il flusso si chiude correttamente..

  .clearfix::after {     
     content: "";     
     clear: both;     
     display: table;
  }

Layout FLEX

Proprietà per il flex-container

#display

Per definire un elemento come contenitore di un layout di tipo flex bisogna settare la sua prorpietà displaycome flex o inline-flex. Tu i sui discendenti diretti (children) saranno trattati come elementi flex.

.container {
  display: flex; /* or inline-flex */
}

#flex-direction

Definisce l'asse principale, definendo così la direzione secondo la quale gli elementi flex vengono inseriti nel contenitore: righe (orizzontalmente) o colonne (verticalalmente) e in quale verso.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row(impostazione predefinita): da sinistra a destra in ltr ; da destra a sinistra inrtl
• row-reverse: da destra a sinistra in ltr ; da sinistra a destra inrtl
• column: come row ma dall'alto in basso
• column-reverse: come row-reverse ma basso verso l'alto

#flex-wrap

Per impostazione predefinita, gli elemnti flex verranno collocati su un'unica linea. Si può consentire gli elementi eseguire il wrapping (andare a capo) se manca lo spazio.

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap(impostazione predefinita): tutti gli elementi flex saranno su una sola riga
• wrap: se manca spazio gli elementi flex si disposrranno su più righe, dall'alto in basso.
• wrap-reverse: se manca spazio gli elementi flex si disposrranno su più righe, dal basso all'alto.

#flex-flow

Si tratta di una forma abbreviata per settare le propriettà flex-direction e flex-wrap  insieme. Il valore predefinito è row nowrap .

.contaner {
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}

#justify-content

Definisce l'allineamento lungo l'asse principale. Aiuta a distribuire lo spazio extra gratis lasciato quando entrambi tutti gli elementi di flessione su una riga sono inflessibili, o sono flessibili ma hanno raggiunto la loro dimensione massima. Esercita anche un certo controllo sull'allineamento degli elementi quando essi overflow la linea.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start(impostazione predefinita): se flex-direction è row gli elementi sono accostati l'uno all'atro a sinistra 
• flex-end: se flex-direction è row gli elementi sono accostati l'uno all'atro a destra
• center: gli elementi sono accostati l'uno all'atro al centro
• space-between: gli elementi sono distribuiti uniformemente; se flex-direction è row  il primo elemento è accostato a sinistra a, l'ultimo a destra.
• space-around: gli elementi sono distribuiti uniformemente con uguale spazio intorno a loro. Si noti che visivamente gli spazi non sono uguali, poiché tutti gli elementi hanno uguale spazio su entrambi i lati. Il primo elemento avrà una sola unità di spazio dal bordo del contenitore, ma due unità di spazio dall'elemento successivo.
• space-evenly: gli elementi sono distribuiti in modo che la distanza tra gli elementi e la distanza dai bordi sia uguale.

#align-items

Questo definisce il comportamento predefinito per come flex, gli elementi vengono disposti lungo l'asse trasversale sulla riga corrente. Pensate a come il justify-content versione per l'asse trasversale (perpendicolare all'asse della conduttura).

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start: bordo di croce-inizio margine degli elementi è posto sulla linea di croce-partenza
• flex-end: bordo di croce-fine margine degli elementi è posto sulla croce-fine linea
• center: gli elementi sono centrati nell'asse trasversale
• baseline: gli elementi sono allineati come allineare le loro linee di base
• stretch(impostazione predefinita): tratto per riempire il contenitore (ancora rispetto min-Larghezza/max-width)

#align-content

Questo allinea le linee di un contenitore di flex all'interno quando c'è spazio extra nell'asse trasversale, simile a come justify-content Allinea i singoli elementi all'interno dell'asse principale.

Nota: questa proprietà non ha effetto quando c'è solo una linea di elementi di flex.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start: pranzo di linee all'inizio del contenitore
• flex-end: pranzo di linee alla fine del contenitore
• center: linee pranzo al centro del contenitore
• space-between: linee distribuite in modo uniforme; la prima riga è all'inizio del contenitore mentre l'ultimo è alla fine
• space-around: linee distribuite in modo uniforme con uguale spazio intorno ogni riga
• stretch(impostazione predefinita): linee tratto per occupare lo spazio rimanente

Proprietà per i flex-item

order

Per impostazione predefinita gli elementi flex vengono disposti nell'ordine in cui appaiono del codice HTML. La proprietà order modifica questo comportamento.

.item {
  order: <integer>; /* default is 0 */
}

flex-grow

Definisce il tasso di crescita di un elemento flex rispetta agli altri nell'occupazione dell spazio disponibile nel contenitore. Accetta un valore intero o decimale che funziona come una percentuale. 

Se tutti gli elementi hanno flex-grow impostato su 1, lo spazio disponibile nel contenitore sarà equamente distribuito tra tutti gli elementi. Se uno degli elementi ha flex-grow impostato a 2, occuperà (se lo spazio disponibile lo consente) il doppio dello spazio occupato dagli altri.

.item {
  flex-grow: <number>; /* default 0 */
}

I numeri negativi non sono validi.

flex-shrink

Funzione come flex-grow ma definisce il tasso di riduzione dello spazio occupato.

.item {
  flex-shrink: <number>; /* default 1 */
}

I numeri negativi non sono validi.

flex-basis

Definisce la dimensione predefinita di un elemento prima che lo spazio disponibile nel contenitore venga distribuito. Può essere una misura (ad esempio 20%, 5rem, ecc.) o la parola chiave auto.

.item {
  flex-basis: <length> | auto; /* default auto */
}

Se impostata su auto , lo spazio disponibile viene distribuito basato al valore di flex-grow.

flex #

Consente di impostare in un unica soluzione le proprietà flex-grow, flex-shrink e flex-basis. Il secondo e il terzo parametro ( flex-shrink e flex-basis ) sono facoltativi. Valore predefinito è 0 1 auto .

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Si consiglia di utilizzare questa proprietà a sintassi abbreviata anziché impostare le singole proprietà. I browser elaborano meglio l'istruzione e correggono automaticamente eventuali incongruenze..

align-self

Consente di modificare l'impostazione  definita da align-items  per singoli elementi flex.

I valori utilizzabili sono gli stessi di align-items

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Si noti che float , clear e vertical-align non hanno alcun effetto su un elemento di flex.

File utilizzati durante la lezione

colonne.html

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Esempio di colonne</title>
    <link rel="stylesheet" href="css/stile.css">
</head>

<body>
    <div class="testata-sito">
        <div class="container">
            <h1>Layout a Colonne</h1>
            <p>Un esercizio</p>
        </div>
    </div>
    <div class="container">
        <h1>Lorem ipsum</h1>
        <div class="riga">
            <div class="col-33">
                <h3>Titolo</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Labore odit amet dicta autem saepe vitae nisi sint,
                    deserunt expedita numquam assumenda fuga, placeat
                    voluptatem doloribus, eaque blanditiis. Placeat,
                    distinctio asperiores!</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Repellendus error nam maxime corrupti praesentium repudiandae
                    quam earum mollitia ut sed amet suscipit quisquam minima
                    accusantium, ab voluptatibus modi. Assumenda, nesciunt!</p>
            </div>
            <div class="col-33">
                <h3>Due</h3>
                <img src="http://lorempixel.com/800/600/sports" alt="Immagine da lorempixel">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Harum, deleniti, veritatis nisi atque voluptas dolores
                    temporibus, minima suscipit ducimus distinctio odio earum
                    quos saepe eum accusantium commodi accusamus possimus esse!</p>
            </div>
            <div class="col-33">
                <h3>Tre</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab a
                    consequatur quasi nemo maiores atque in ut earum! Hic aperiam
                    sed magnam voluptatum placeat neque libero, ab a quos vero.</p>
            </div>
            <div class="col-33">
                <h3>Quattro</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
                    Quisquam veniam fugiat itaque animi non? Corporis libero ratione, 
                    tempora illo expedita molestias itaque ab quae eum, provident vitae 
                    quia repudiandae quidem?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, rem 
                    ad ex non vero sequi nisi unde officiis autem, obcaecati, 
                    placeat eligendi consequatur! Quos optio tempore, saepe 
                    doloribus inventore delectus!</p>
            </div>
        </div>
        <p class="in-evidenza">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Blanditiis sed eligendi adipisci non ad sunt rerum amet
            itaque cupiditate totam necessitatibus ipsa fugiat quisquam
            porro, quidem in culpa maiores commodi?</p>
        <div class="riga-flex">
            <div class="col-33-flex">
                <h3>Titolo</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Labore odit amet dicta autem saepe vitae nisi sint,
                    deserunt expedita numquam assumenda fuga, placeat
                    voluptatem doloribus, eaque blanditiis. Placeat,
                    distinctio asperiores!</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Repellendus error nam maxime corrupti praesentium repudiandae
                    quam earum mollitia ut sed amet suscipit quisquam minima
                    accusantium, ab voluptatibus modi. Assumenda, nesciunt!</p>
            </div>
            <div class="col-33-flex">
                <h3>Due</h3>
                <img src="http://lorempixel.com/800/600/sports" alt="Immagine da lorempixel">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Harum, deleniti, veritatis nisi atque voluptas dolores
                    temporibus, minima suscipit ducimus distinctio odio earum
                    quos saepe eum accusantium commodi accusamus possimus esse!</p>
            </div>
            <div class="col-33-flex">
                <h3>Tre</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab a
                    consequatur quasi nemo maiores atque in ut earum! Hic aperiam
                    sed magnam voluptatum placeat neque libero, ab a quos vero.</p>
            </div>
            <div class="col-33-flex">
                <h3>Quattro</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                    Deserunt, ea dolore, enim natus doloremque totam, aspernatur 
                    perferendis dicta qui rerum tempora voluptates fugiat pariatur 
                    reprehenderit quia animi non! Ullam, blanditiis.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, 
                    architecto sint neque veritatis, molestias adipisci excepturi hic 
                    cum ipsam optio magnam, amet maiores. Vel officiis iure quasi quas, 
                    rem accusamus.</p>
            </div>
        </div>
    </div>
</body>

</html>

stile.css

/*
    La misura di tutti gli elementi utilizza lo stile border-box
*/
*{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
/*
    CARATTERE DI BASE
*/
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    margin:0;
}
/*
Titoli
*/
h1,h2,h3,h4,h5,h6 {
    font-weight: 300;
    font-variant: small-caps;
    letter-spacing: 0.1em;
}
h1 {
    font-size: 4rem;
}
h2 {
    font-size: 3.2rem;
}
h3 {
    font-size: 2.5rem;
}
h4 {
    font-size: 1.8rem;
}
h5 {
    font-size: 1.2rem;
}
h6 {
    font-size: 0.9rem;
}
/*
    Paragrafo
*/
p {
    line-height: 1.4;
}

/*
LINK
*/

a:hover {
    color:red;
}

a[target="_blank"]::after {
    content: "*";
}

/*
PULSANTI 
*/

button, input[type="submit"], input[type="reset"],
input[type="button"] {
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*
LISTE 
*/

ol > li > ol {
    list-style: upper-roman;
}

ul > li > ul {
    list-style: lower-alpha;
}

/*
Classi
*/
.container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.container img {
    max-width: 100%;
    height: auto;
}

.occhiello {
    font-size: 1.2em;
    font-style: italic;
}

.evidenziato {
    font-weight: 700;
    color:blueviolet;
}

.capolettera::first-letter {
    font-family: 'Times New Roman', Times, serif;
    font-size:2.5em;
    font-weight: 700;
}
.prima-riga::first-line {
    font-size: 1.3em;
    font-style: italic;
}

.text-center {
    text-align: center;
}

.in-evidenza {
    border: 3px grey solid;
    padding: 1.5rem 2rem 1.5rem 2rem;
    font-size: 1.2em;
    background-color: #ffffcc;
} 

.barra-nav {
    background-color: darkmagenta;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.barra-nav ul {
    margin: 0;
    padding: 0;
}

.barra-nav ul li {
    list-style: none;
    display: inline-block;
}

.barra-nav ul li a {
    color: rgba(255,255,255,0.8);
    font-size: 1.3rem;
    display: block;
    padding: 1rem 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
}

.barra-nav ul li a:hover {
    background-color: rgba(255,255,255,0.2);
    color: white;
}

.padding-navbar {
    padding-top:60px;
}

.testata-sito {
    background-color: #666;
    color: #eee;
    padding: 50px 0;
}

.testata-sito h1 {
    font-size: 5rem;
    margin-top:0;
}

.riga {
    margin-left: -15px;
    margin-right: -15px;
}
.riga::after {
    content:"";
    display: table;
    clear: both;
}
.col-33 {
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    width: 33.3%;
}

@media (max-width: 576px) {
    .col-33 {
        width: 100%;
    }
}

.riga-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: -15px;
    margin-left: -15px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
} 
.col-33-flex {
    padding-left: 15px;
    padding-right: 15px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3%;
            flex: 0 0 33.3%;
}

@media (max-width: 576px) {
    .riga-flex {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-flow:column wrap;
                flex-flow:column wrap;
    }
}

carcolatrice/index.html

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/stile.css">
    <title>Calcolatrice</title>
</head>

<body>
    <div class="calcolatrice">
        <div class="top-bar">
            <img src="img/Logo-Accademia.png" alt="Accademia di Belle Arti Urbino">
            <span class="top-bar-title">Calcolatrice</span>
        </div>
    </div>
</body>

</html>

/carcolatrice/css/stile.css

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
        Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin:0;
}
* {
    box-sizing: border-box;
}

.calcolatrice {
    height: 100vh;
    background-color: #666;
    color: white;
    padding: 15px;
    display: flex;
    flex-flow: column nowrap;
}
.top-bar {
    width: 100%;
    flex: 0 0 3em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.top-bar > img {
    height: 2.5em;
    width: auto;
    flex: 0 0 1%;
}

.top-bar-title {
    font-size: 1.1em;
    font-weight: 700;
}