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

tipografia.html

<!doctype html>
<html lang="it">
<head>
	<meta charset="utf-8">
	<title>Tipografia</title>
	<link href="css/stile.css" rel="stylesheet">
</head>

<body>
	<nav class="navbar navbar-light fixed-top">
		<div class="contenitore">
			<div class="logo">
				<img src="immagini/C- logo-bandiera-01.svg" alt="Logo">
			</div>
			<ul>
				<li><a href="#titoli">Titoli</a></li>
				<li><a href="#paragrafi">Paragrafi</a></li>
				<li><a href="#liste">Liste</a></li>
				<li><a href="#immagini">Immagini</a></li>
				<li><a href="#video">Video</a></li>
			</ul>
		</div>
	</nav>
	<section id="titoli" class="contenitore sezione-main" >
		<h1>Titolo &nbsp;1 </h1>
		<h2>Titolo 2 </h2>
		<h3>Titolo 3</h3>
		<h4>Titolo 4</h4>
		<h5>Titolo 5</h5>
		<h6>Titolo 6</h6>
	</section>
	<section id="paragrafi" class="contenitore sezione-main">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam tenetur aliquam asperiores beatae, eos ex enim, nesciunt esse libero quo ullam ab dicta fugit sed. Dicta tempora quas possimus dolorum!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id adipisci tempora, perferendis assumenda consectetur, soluta explicabo consequatur magni corrupti minima deserunt enim fugit necessitatibus vero temporibus ipsam repellat voluptatem tenetur.&eacute;</p>
	</section>
	<section id="liste" class="contenitore sezione-main">
		<ul>
			<li>Primo elemento</li>
			<li>Secondo</li>
			<li> Sottolista
				<ul>
					<li>Sottolista</li>
					<li>Sotto sotto</li>
				</ul>
			</li>
			<li>Quarto</li>
		</ul>
		<ol>
			<li>Primo</li>
			<li>Secondo</li>
		</ol>
	</section>
	<section id="elemento_vari" class="contenitore">
		<div>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipisicing elit. Accusantium molestiae eius facilis temporibus similique. Incidunt impedit error in cumque. Saepe dicta obcaecati fugiat quasi, quod, provident inventore. Ea, reiciendis, veritatis.</div>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Maiores facilis </em>hic maxime vitae magni, nisi repellendus non animi nesciunt, perspiciatis, cupiditate eius! Reprehenderit explicabo, doloremque doloribus rerum, illum quis alias!</div>
		<p style="text-align: right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis voluptates, reiciendis. Voluptatum dolores iure natus sed inventore omnis placeat autem eligendi eveniet, fugit, amet, tempore blanditiis assumenda esse quo quos!</p>
		<p>code: <code>Questo è codice</code><br>
			sample: <samp>Questo e un test</samp><br>
			var: <var>Variabile</var><br>
			keyboard:<kbd>Comninazione di tasti</kbd> </p>
		<p>&copy; 2018 Ifts Tectnici Multimediali per Cultura&nbsp;e&nbsp;per&nbsp;l'Arte</p>
	</section>
	<section id="elementi_form" class="contenitore">
		<h1>Form</h1>
		<form>
			<label>Nome</label>
			<input type="text" value="" placeholder="Inserisci il tuo nome" maxlength="10" required>
			<br>
			<label>Password</label>
			<input type="password" maxlength="6">
			<br>
			<label for="sesso">Seleziona</label>
			<input type="checkbox" value="maschio" id="sesso">
			<br>
			<label for="maschio">Maschio</label>
			<input type="radio" id="maschio" name="scelta
																					 sesso">
			<label for="femmina">Femmina</label>
			<input id="femmina" type="radio" name="sceltasesso">
		</form>
	</section>
	<section id="immagini" class="contenitore sezione-main"> <img src="immagini/um7buv3a.jpg" alt="Immagine di prova"> <br>
		<img src="immagini/C- logo-bandiera-01.svg" alt="Logo di prova" style="width:50%; height:auto"> </section>
	<section id="video" class="contenitore sezione-main">
		<video controls>
			<source src="media/mov_bbb.mp4" type="video/mp4">
			<source src="media/mov_bbb.ogg" type="video/ogg">
		</video>
	</section>
	<section id="audio">
		<audio controls>
			<source src="media/horse.mp3" type="audio/mp3">
		</audio>
	</section>
	<section id="frame" class="contenitore">
		<iframe width="640" height="360" src="https://www.youtube.com/embed/eU7V4GyEuXA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	</section>
</body>
</html>

/css/stile.css

@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,700|Roboto+Slab');
/* Impostazioni generali */
body {
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	line-height: 1.3;
	font-style: normal;
	font-weight: 300;
	color: #222222;
	margin:0;
	padding:0;
}

h1,h2,h3,h4,h5,h6 {
	line-height: 1.1;
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
}

h1 {
	font-size: 3em;
}
h2 {
	font-size: 2.7em;
}
h3 {
	font-size: 2.2em;
}
h4 {
	font-size: 1.7em;
}
h5 {
	font-size: 1em;
}
h6 {
	font-size: 0.8em;
}

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

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

.contenitore video, .contenitore iframe {
	width: 100%;
}

li {
	font-style: normal;
	 color: #222222; 
}

/* Ippostazione sezione */

.sezione-main {
	padding-top: 60px;\
}

/* Barra di navigazione */
.navbar {
	background-color: #333333;
	color: white;
}

.fixed-top {
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
}

.navbar a {
	color: #eeeeee;
	text-decoration: none;
}

.navbar a:hover {
	color: #ffffaa;
}

.navbar ul {
	margin: 0;
	padding:0;
	list-style: none;
}
 
.navbar ul > li {
	display: inline-block;
}
.navbar ul > li > a { 
	display: block;
	padding: 10px 20px;
}

.navbar ul > li > a:hover {
	background-color: rgba(255,255,255,0.5);
	color: black;
}

.navbar.navbar-light {
	background-color: aliceblue;
	color:#000055;
}

.navbar.navbar-light a {
	color:#000055;
}

.navbar.navbar-light a:hover {
	color:aquamarine;
	background-color: #000033;
}
.navbar .logo {
	padding-top: 5px;
	padding-bottom: 5px;
}

.navbar .logo img {
	height:30px;
}

.navbar > .contenitore {
	display: flex;
	justify-content: space-between;
}

 

Torna all'inizio