Order

da Cristina | Mag 30, 2020 | CSS, Web

La proprietà order permette di decidere l’ordine di allineamento degli elementi, cioè l’ordine in cui viene mostrato un box contenitore rispetto agli altri definiti nello stesso contenitore padre.

Order possibili valori

Si specifica dunque un valore numerico che indica l’ordine di apparizione, cioè l’elemento che deve essere visualizzato per primo.

Se ci sono dunque 3 elementi con ordine rispettivamente 1, 2 e 3 allora l’elemento con ordine 1 sarà il primo ad essere allineato a sinistra, a seguire ci sono gli altri elemento che seguono un ordine crescente.

Order esempi

In questo esempio gli elementi seguiranno questo ordine: terzo livello, quarto livello, quinto livello, primo livello e infine secondo livello.

Ecco dunque il codice completo:

.container {
     background-color: #ff00ff;
     display: flex;
     height:200px;
     width:700px;
     align-items: flex-end;
 }
.container > div {
     background-color: #eee;
     width: 200px;
     margin: 10px;
     text-align: center;
     line-height: 75px;
     font-size: 20px;
   }
.order-1 {
     order:1
 }
.order-2 {
   order:2;
 }
.order-3 {
   order:3;
 }
.order-4 {
   order:4;
 }
.order-5 {
   order:5;
 }

 
  <div class="container">
    <div class="order-5">1</div>
    <div class="order-4">2</div>
    <div class="order-1">3</div>
    <div class="order-2">4</div>
    <div class="order-3">5</div>
  </div>

Nell’immagine sotto si vede l’ordine degli elementi secondo quanto specificato nell’esempio spiegato:

Conclusioni

Abbiamo affrontato una lezione molto semplice sulla proprietà order, adesso provate anche voi ad inserire più contenitori e ad assegnare un ordine diverso per ciascuno di essi

Nelle prossime lezioni affronteremo ancora altre interessanti proprietà dei CSS per la costruzioni di layout.

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

Align self

da Cristina | Mag 29, 2020 | CSS, Web

La proprietà align self consente di specificare per un singolo box l’allineamento sull’asse perpendicolare, cioè sull’asse y.

In definitiva questa proprietà sostituisce l’allineamento impostato dalla proprietà align-items impostato nel contenitore genitore, se presente.

Align self valori possibili

Questa proprietà consente dunque di impostare i seguenti valori: flex-start, flex-end, center, baseline, auto e stretch.

Align self esempi

In questo esempio impostiamo per prima cosa la proprietà align-self al valore center.

Dopo assegniamo questa classe a due dei cinque livelli di esempio inseriti, in modo da cambiarne l’allineamento.

Ecco dunque il codice HTML e CSS d’esempio completo:

.container {
     background-color: #ff00ff;
     display: flex;
     align-items: flex-end;
     height:200px;
     width:700px;
}
.container > div {
     background-color: #eee;
     width: 200px;
     margin: 10px;
     text-align: center;
     line-height: 75px;
     font-size: 20px;
}
.al-self {
    align-self: center
}

<div class="container">
    <div>1</div>
    <div class="al-self">2</div>
    <div class="al-self">3</div>
    <div>4</div>
    <div>5</div>
</div>

Possiamo notare che il livello 2 e 3 seguono un allineamento centrato sull’asse delle ordinate (asse y) mentre tutti gli altri seguono l’allineamento specificato nell’elemento padre tramite aling-items.

Nell’immagine sotto potete quindi vedere cosa produce il codice d’esempio spiegato sopra.

align-self:flex-start;

Cambiamo adesso la proprietà per il livello figlio in questo modo:

 .al-self {
       align-self:flex-start
 }

Come si vede dall’immagine sotto, gli elementi box a cui è applicata questa classe sono allineati perpendicolarmente in alto.

Conclusioni

In questa lezione abbiamo visto come assegnare la proprietà align self ai box flessibili contenuti all’interno di un contenitore padre con al proprietà display: flex.

Nelle prossime lezioni faremo ancora altri esempi pratici utilizzando anche altre proprietà dei box flessibili 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-indexx nei CSS

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

Flex CSS

da Cristina | Mag 29, 2020 | CSS, Web

La proprietà flex dei CSS consente di compattare le regole precedentemente studiate e cioè 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 un container con display flex e abbiamo inserito una certo numero di di box al suo interno. Poi abbiamo assegnato a due di essi la 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 CSS di esempio che utilizza la proprietà flex su due distinti elementi div:

.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%; }

Ed ecco di seguito il codice HTML con un container e 5 elementi figli:

<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>

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

Conclusioni

In questa lezione abbiamo affrontato un semplice esempio sulla proprietà flex dei CSS, 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

Proprietà Overflow nei CSS

Introduzione a flexbox CSS 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

flex basis

da Cristina | Mag 29, 2020 | CSS, Web

La proprietà flex basis consente di impostare le dimensioni in lunghezza di un box. Nel caso in cui è impostato flex-direction:row, oppure se non è specificato nulla, la lunghezza si riferisce alla larghezza (width), altrimenti se flex-direction:column allora la lunghezza si riferisce all’altezza (height).

flex basis valori possibili

Quindi si possono indicare, come valori possibili, i valori in percentuale, i valori numerici oppure la parola chiave auto. Il valore auto è quello di default e dunque divide in percentuale la larghezza tra i vari elementi sulla base della proprietà flex-grow.

flex basis esempio

Facciamo adesso degli esempi pratici per capire come funziona questa proprietà.

Creiamo quindi alcuni box contenitori e in alcuni impostiamo una dimensione in larghezza di 400 pixel e 100 pixel.

Di seguito ecco dunque il codice HTML e CSS di esempio:

.container {
    background-color: #ff00ff;
    display: flex;
    align-items: flex-start;
    width: 700px;
 }
.container > div {
    background-color: #eee;
    width: 200px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 20px;
}
.dim_2 {
   flex-basis:400px;
}
.dim_3 {
   flex-basis: 100px;
}

 <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>

Se proviamo questo esempio su un browser otteniamo il risultato come da figura sotto:

Modificate adesso l’esempio di prima impostando la proprietà flex-direction:column.

Di seguito ecco quindi il codice modificato:

.container {
     background-color: #ff00ff;
     display: flex;
     flex-direction:column;
     width:700px;
}
.container > div {
    background-color: #eee;
    width: 200px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 20px;
 }
.dim_2 {
    flex-basis:400px;
}
.dim_3 {
    flex-basis: 100px;
}

Provando questo codice potete notare che flex-basis in questo caso si riferisce all’altezza e non più alla larghezza.

Conclusioni

Abbiamo affrontato un semplice esempio sulla proprietà flex basis, provate adesso voi stessi ad inserire più contenitori e a variare le lunghezze dei box contenitori

Nella prossima lezione affronteremo ancora delle proprietà dei box flessibili 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

Flex shrink

da Cristina | Mag 29, 2020 | CSS, Web

La proprietà flex shrink consente di impostare il fattore di riduzione, cioè rendere semplicemente più piccolo un box contenitore rispetto ad un altro o ad altri presenti nel contenitore padre.

Flex shrink valori possibili

Così come per la proprietà precedente flex grow, anche in questo caso si possono indicare dei valori numerici che determinano il fattore di riduzione di un box rispetto agli altri presenti nello stesso contenitore padre.

Se ad esempio un elemento ha la proprietà flex-shrink impostata a 2 allora verrà ridotto del doppio rispetto a quello il valore di flex-shrink impostato a 1.

Il valore di default in questo caso è 1.

Flex shrink esempi

Facciamo degli esempi pratici per capire come funziona questa proprietà.

Creiamo quindi alcuni box contenitori e in alcuni impostiamo un fattore di riduzione di 2 e di 3.

Di seguito ecco dunque il codice HTML e CSS di esempio:

.container {
      background-color: #ff00ff;
      display: flex;
      align-items: flex-start;
      width:700px;
 }
.container > div {
      background-color: #eee;
      width: 200px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 20px;
 }
.ridotto_2 {
     flex-shrink:2;
}
.ridotto_3 {
     flex-shrink:3;
 }

  <div class="container">
    <div>1</div>
    <div class="ridotto_2">2</div>
    <div class="ridotto_3">3</div>
    <div>4</div>
    <div>5</div>
  </div>

Proviamo il seguente codice in un browser e otteniamo un risultato come da figura sotto:

Come potete notare dove abbiamo applicato il fattore di riduzione 2 e 3 i box contenitori sono più piccoli.

Conclusioni

Abbiamo studiato un semplice esempio sulla proprietà flex shrink, provate adesso voi stessi ad inserire più contenitori e a variare il fattore di riduzione in base alle vostre esigenze.

Nella prossima lezione affronteremo altre proprietà dei box flessibili 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

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