Lezione 8 (IFTS 2019)

Sintesi della lezione

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

Proprietà per il flex-container

#display

Per definire un elemento come contenitore di un layout di tipo flex bisogna settare la sua prorpietà display come 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.

Guarda Esempio flex-wrap di Bruno Migliaretti su CodePen.

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

Pagine create durante la lezione

prova-flex.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Prove Flex</title>
<link href="css/stile.css" rel="stylesheet" type="text/css">
</head>
<body>
	<section>
		<div class="container">
			<h1>Questo è un titolo</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laborum, commodi voluptas laudantium libero tempora earum necessitatibus. Assumenda, facilis dolorem eum est ratione natus, debitis mollitia rem reiciendis similique pariatur!</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis quae aliquid illo recusandae, et, commodi esse consequatur quasi quisquam officia cupiditate, quidem quibusdam eligendi enim dolorem at magni odio id.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus beatae nemo, blanditiis eligendi illo ipsum? Eligendi praesentium blanditiis similique, iusto sunt repellat accusamus impedit dolor cupiditate quos quo sed!</p>
		</div>
	</section>
	<section>
		<div class="container">
			<h1>Tre colonne</h1>
			<div class="row">
				<div class="col-33">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa id placeat? Minima suscipit rerum molestias ipsa distinctio, alias, reiciendis debitis quibusdam, repellat consequuntur facilis voluptas voluptatum, recusandae quos ab.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quo fugit ipsa quas exercitationem cum minima beatae blanditiis! Nihil error culpa pariatur explicabo adipisci aliquam, nam! Suscipit nesciunt cupiditate, esse.</p>
				</div>
				<div class="col-33">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At nemo, voluptates dicta quae. Fugit, laboriosam facilis quo veritatis explicabo obcaecati ex, culpa itaque omnis voluptas eveniet, impedit, porro eligendi amet.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quam, quasi voluptatem iusto inventore optio, corporis earum nisi consequatur deserunt necessitatibus nesciunt. Doloremque in harum asperiores sit iusto at non!</p>
				</div>
				<div class="col-33">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At nemo, voluptates dicta quae. Fugit, laboriosam facilis quo veritatis explicabo obcaecati ex, culpa itaque omnis voluptas eveniet, impedit, porro eligendi amet.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quam, quasi voluptatem iusto inventore optio, corporis earum nisi consequatur deserunt necessitatibus nesciunt. Doloremque in harum asperiores sit iusto at non!</p>
				</div>
			</div>
		</div>
	</section>
</body>
</html>

/css/stile.css

@charset "utf-8";
/* CSS Document */

* {
	box-sizing: border-box;
}

body {
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 16px;
	color: #333333;
	margin:0;
	padding:0;
}

/* TITOLI */
h1,h2,h3,h4,h5,h6 {
	font-weight: 300;
	margin-bottom: 0;
}
h1 {
	font-size: 4.5rem;
}
h2 {
	font-size: 3.8rem;
}

h3 {
	font-size:2.7rem;
}

h4 {
	font-size: 2rem;
}

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

.row {
	display: flex;
	flex-flow: row wrap;
}

.col-33 {
	padding-left: 15px;
	padding-right: 15px;
	flex: 0 0 33.3%;
}

 

Torna all'inizio