384400/ -gutter.md

## -gutter.md

      
    Raw
  

               -gutter.md
            
          
    Comment afficher une gouttière avec le module Flexbox Layout ?

[CSS Flexible Box Layout Module Level 1] (https://www.w3.org/TR/css-flexbox-1/) permet facilement de disposer un contenu sous formes de colonnes, mais ne prend pas en charge les gouttières.
Une gouttière rend le contenu plus facile à lire.
Réduite à des dimensions minimales, la gouttière remplace un trait horizontal (ou vertical). Il suffit d'attribuer un arrière-plan de couleur au conteneur principal et de donner une marge aux éléments qui suivent, comme le montre le fichier gutter-a.hml.
Pour dessiner un trait de séparation, il existe une solution encore plus simple : attribuer une bordure aux conteneurs, comme le montre le fichier gutter-b.html.
Le contenu de chaque colonne est aéré en utilisant les propriétés padding. Cependant, pour ne pas altérer les dimensions des colonnes, ce rembourrage s'effectue dans un conteneur enfant.
Dans ces deux exemples, nous indiquons une hauteur. Cependant, en pratique, cette dimension est rarement connue à l'avance !
Le fichier gutter-c.html présente des colonnes de texte d'une longueur différente. Si nous voulons aligner verticalement le contenu de chaque colonne, nous rendons flexibles chaque conteneur enfant. justify-content: center permet ensuite de centrer le contenu verticalement. (S'agit-il de la meilleure méthode ?!) justify-content: flex-start est le comportement par défaut, tandis quejustify-content: flex-end autorise un alignement en bas.

  
## gutter-a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Afficher une gouttière grâce au module Flexbox Layout</title>
<style>
	.container {
		background-color: blue;
		display: flex;
	}
	.square {
		background-color: red;
		height: 200px;
	}
	div {
		flex: 1 0 0;
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
	/* Si on connaît à l'avance le nombre de colonnes à afficher, on pourra préciser les marges une à une. */
	div:first-of-type {
		margin-left: 0;
	}
	div:last-of-type {
		margin-right: 0;
	}
</style>
</head>
<body>
	<div class="container">
		<div class="square">
		</div>
		<div class="square">
		</div>
		<div class="square">
		</div>
	</div>
</body>
</html>

## gutter-b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Afficher une gouttière ave une bordure grâce au module Flexbox Layout</title>
<style>
	.container {
		display: flex;
	}
	.square {
		background-color: red;
		height: 200px;
	}
	div {
		border-left: 0.5em blue solid;
		border-right: 0.5em blue solid;
		flex: 1 0 0;
	}
	/*
	Si on connaît à l'avance le nombre de colonnes à afficher, on pourra préciser les marges puis les rembourrages un à un.
	*/
	div:first-of-type {
		border-left: none;
	}
	div:last-of-type {
		border-right: none;
	}
	/* Rembourrage dans un conteneur enfant */
	.content {
		padding-left: 1em;
		padding-right: 1em;
	}
	/* Annulation des marges superflues */
	div:first-of-type > .content {
		padding-left: 0;
	}
	div:last-of-type > .content {
		padding-right: 0;
	}
</style>
</head>
<body>
	<div class="container">
		<div class="square">
			<div class="content">
			</div>
		</div>
		<div class="square">
			<div class="content">
			</div>
		</div>
		<div class="square">
			<div class="content">
			</div>
		</div>
	</div>
</body>
</html>

## gutter-c.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Afficher une gouttière ave une bordure grâce au module Flexbox Layout</title>
<style>
	.container {
		display: flex;
		/* align-items: center;*/ /* Provoque dans ce cas un décalage vertical de la deuxième bordure */
	}
	.entry {
		border-left: 0.25em blue solid;
		border-right: 0.25em blue solid;
		flex: 1 0 0;
		/* Alignement vertical optionnel */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	}
	.entry:first-of-type  {
		border-left: none;
	}
	.entry:last-of-type {
		border-right: none;
	}
	/* Rembourrage dans un conteneur enfant */
	.content {
		padding-left: 1em;
		padding-right: 1em;
	}
	/* Annulation des marges inutiles */
	.entry:first-of-type > .content {
		padding-left: 0;
	}
	.entry:last-of-type > .content {
		padding-right: 0;
	}
</style>
</head>
<body>
<div class="container">
	<div class="entry">
		<div class="content">
			<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.</p>
			<p>Cum autem commodis intervallata temporibus convivia longa et noxia coeperint apparari vel distributio sollemnium sportularum, anxia deliberatione tractatur an exceptis his quibus vicissitudo debetur, peregrinum invitari conveniet, et si digesto plene consilio id placuerit fieri, is adhibetur qui pro domibus excubat aurigarum aut artem tesserariam profitetur aut secretiora quaedam se nosse confingit.</p>
			<p>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</p>
		</div>
	</div>
	<div class="entry">
		<div class="content">
			<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.</p>
			<p>Cum autem commodis intervallata temporibus convivia longa et noxia coeperint apparari vel distributio sollemnium sportularum, anxia deliberatione tractatur an exceptis his quibus vicissitudo debetur, peregrinum invitari conveniet, et si digesto plene consilio id placuerit fieri, is adhibetur qui pro domibus excubat aurigarum aut artem tesserariam profitetur aut secretiora quaedam se nosse confingit.</p>
		</div>
	</div>
 </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Afficher une gouttière grâce au module Flexbox Layout</title>
	<style>
	.container {
	background-color: blue;
	display: flex;
	}
	.square {
	background-color: red;
	height: 200px;
	}
	div {
	flex: 1 0 0;
	margin-left: 0.5em;
	margin-right: 0.5em;
	}
	/* Si on connaît à l'avance le nombre de colonnes à afficher, on pourra préciser les marges une à une. */
	div:first-of-type {
	margin-left: 0;
	}
	div:last-of-type {
	margin-right: 0;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="square">
	</div>
	<div class="square">
	</div>
	<div class="square">
	</div>
	</div>
	</body>
	</html>