Flex CSS

La proprietà flex dei CSS consente di compattare le regole precedentemente studiate: flex-grow, flex-shrink e flex-basis in un unico comando.

Flex CSS esempio

Spieghiamo dunque meglio questa proprietà con un semplice esempio.

In questo esempio abbiamo inserito una certo numero di di box e abbiamo assegnato a due di essi le proprietà flex.

In particolare ad un contenitore abbiamo assegnato il valore di default per le proprietà flex-grow e flex-shrink mentre abbiamo assegnato il valore di 300 pixel per la proprietà flex-basis.

Per il secondo box invece abbiamo assegnato a flex-grow il valore 1, a flex-shrink il valore 0 mentre a flex-basic il valore in percentuale del 25%.

Ecco dunque il codice HTML e CSS di esempio, abbiamo inserito per comodità il codice CSS all’interno della pagina HTML.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempio proprietà flex CSS</title>
    <style>
      .container {
        background-color: #ff00ff;
        display: flex;
        width:700px;
      }
      .container > div {
        background-color: #eee;
        width: 200px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 20px;
      }
      .dim_2 {
        flex: 0 1 300px;
      }
      .dim_3 {
        flex: 1 1 25%;
      }
  </style>
  </head>
  <body>
  <h1>Proprietà flex</h1>
  <div class="container">
    <div>1</div>
    <div class="dim_2">2</div>
    <div class="dim_3">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  </body>
</html>

Come si vede dall’immagine sotto, il secondo ed il terzo livello seguono i valori assegnati alla proprietà flex, in particolare al secondo viene applicata una larghezza di 300px, mentre il secondo subisce un ridimensionamento del 25%.

flex

Conclusioni

Abbiamo affrontato un semplice esempio sulla proprietà flex, adesso provate voi ad inserire più contenitori e ad assegnare a ciascuno di essi la proprietà flex personalizzata in base alle vostre esigenze.

Nella prossima lezione affronteremo ancora altre proprietà dei box flessibili e faremo altri esempi al fine di consolidare questi argomenti.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Come impostare le pseudo-classi

I font nei CSS

Proprietà Overflow nei CSS

La proprietà position dei CSS

Proprietà z-index

Introduzione a flexbox e proprietà, display:flex

Le proprietà dei box flessibili

Esempi con la proprietà flex-direction

Impostare la proprietà flex-wrap

Come utilizzare la proprietà justify content

Esempi con la proprietà aling items

Utilizzare la proprietà align content per contenitori multi-riga

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *