une question de flux…

La mise en place des différents éléments de la page se fait par défaut selon le Flux courant. Les éléments (balises) sont placés les uns après les autres dans le code HTML de la page. L’ordre dans lequel apparaissent les balises dans le code HTML sera l’ordre dans lequel ils seront affichés et apparaîtront dans le document, c’est le Flux.

Les éléments blocs les uns en dessous des autres (verticalement et occupent toute la largeur du bloc parent).
Les éléments en ligne côte à côte (horizontalement jusqu’à occuper la largeur du bloc parent et vont à la ligne en cas de dépassement).

à savoir : les blocs positionnés en « absolu » ou « fixé » sortent du flux naturel et échappent quelque peu à cette règle. Ils ne sont alors plus dépendant des éléments frères. Pour se placer, un tel bloc se réfère non pas à son Parent direct, mais au premier Ancêtre positionné qu’il rencontre.

notion d’héritage = éléments ancêtres, parents, enfants, frères

Le terme CSS contient le mot cascade car les propriétés sont hérités pas les enfants.
Si on attribut la couleur rouge à la balise <body>, inutile de la faire à <p>, <h1>, <h2>, <strong>… car elles vont héritées de cette propriété.

Un élément Ancêtre est un élément qui contient un élément ou une hiérarchie d’éléments.
Un bloc Parent est un élément contenant directement un autre bloc. Par exemple, un <div> contenant un paragraphe <p>. Attention : si ce paragraphe contient lui-même des éléments (ex: <strong>), <div> ne sera pas Parent de l’élément <strong> mais uniquement son Ancêtre. Le Parent est donc l’Ancêtre immédiat.
Un bloc contenu directement dans un autre bloc est dit Enfant de cet élément. Par exemple, les éléments <li> sont les enfants de leur conteneur <ul>.
Les éléments ayant le même élément Parent sont appelés Frères comme une suite de <li>.

gérer les dimensions des boîtes

Contrairement à une balise de type inline, une balise de type block a des dimensions précises. Elle possède une largeur et une hauteur et dispose de deux propriétés CSS :

width: c’est la largeur du bloc. Exprimer en pixels (px) ou en pourcentage (%).
height: c’est la hauteur du bloc. Exprimer en pixels (px), ou en pourcentage (%).

Par défaut, un bloc prend 100% de la largeur disponible sauf si vous indiquez un pourcentage à 50% par exemple :

minimum et maximum

Vous pouvez définir des dimensions « limites », elles seront notamment utiles lorsque le site doit s’adapter aux différentes supports multimédias (smartphone, tablette…).

min-width: largeur minimale ;
min-height: hauteur minimale ;
max-width: largeur maximale ;
max-height: hauteur maximale.

la mise en page avec Flexbox

Le principe est simple : on définit un conteneur et à l’intérieur on place plusieurs éléments.

propriété CSS > display: flex;

Une seule propriété suffit pour aligner les éléments : flex.

Sans la propriété display: flex;

propriété CSS > flex-direction

Avecflex-direction, on peut agencer les éléments dans le sens souhaité ou encore les inverser :

row : organisés sur une ligne (par défaut)
column : organisés sur une colonne
row-reverse : organisés sur une ligne, mais en ordre inversé
column-reverse : organisés sur une colonne, mais en ordre inversé (exemple ci-dessous)

propriété CSS > flex-wrap

Par défaut, les blocs essaient de rester sur la même ligne. Mais vous pouvez demander à ce que les blocs aillent à la ligne lorsqu’ils n’ont plus la place avec flex-wrap :

nowrap : pas de retour à la ligne (par défaut)
wrap : les éléments vont à la ligne lorsqu’il n’y a plus la place
wrap-reverse : les éléments vont à la ligne lorsqu’il n’y a plus la place en sens inverse

propriété CSS > justify-content

Pour changer l’alignement horizontal des éléments dans le conteneur, on utilise justify-content :

flex-start : alignés au début (par défaut)
flex-end : alignés à la fin
center : alignés au centre
space-between : les éléments sont étirés sur tout l’axe (il y a de l’espace entre eux)
space-around : idem mais ils laissent aussi de l’espace sur les extrémités

propriété CSS > align-items

Pour changer l’alignement vertical des éléments dans le conteneur, on utilise align-items :

stretch : les éléments sont étirés sur tout l’axe (valeur par défaut)
flex-start : alignés au début
flex-end : alignés à la fin
center : alignés au centre (exemple ci-dessous)
baseline : alignés sur la ligne de base (semblable à flex-start)

Le centrage vertical et horizontal peut être obtenu encore plus facilement. Dites que votre conteneur est une flexbox et établissez des marges automatiques sur les éléments à l’intérieur.

les marges

Les blocs possèdent des marges et leurs propriétés CSS sont :

padding: indique la taille de la marge intérieure. À exprimer en général en pixels (px).
margin: indique la taille de la marge extérieure. Également en pixels.

Pour constater l’espacement entre des zones de texte, testez le CSS suivant sur deux blocs <p>.

Par défaut, il n’y a pas de marge intérieure (padding). Par contre, il y a une marge extérieure (margin). Cette marge crée un espace entre les deux paragraphes (<p>) et donne l’impression que l’on a sauté une ligne.

Les marges par défaut ne sont pas les mêmes pour toutes les balises de type block. Essayez d’appliquer ce CSS à des balises <div> qui contiennent du texte, par exemple : vous verrez que, dans ce cas, il n’y a par défaut ni marge intérieure, ni marge extérieure !

Enregistrer

Si vous souhaitez espacer les paragraphes, ajoutez des pixels à la propriété margin.

Si vous souhaitez varier les espaces sur chaque côté du bloc, vous devez l’indiquer de cette manière :

margin-top: marge extérieure en haut ;
margin-bottom: marge extérieure en bas ;
margin-left: marge extérieure à gauche ;
margin-right: marge extérieure à droite.

Et de même avec la propriété padding.

Pour simplifier le code, vous pouvez spécifier les marges :

margin: 2px 0 3px 1px; signifie « 2 px de marge en haut, 0 px à droite (le px est facultatif dans ce cas), 3 px en bas, 1 px à gauche ».
ou encore margin: 2px 1px; signifie « 2 px de marge en haut et en bas, 1 px de marge à gauche et à droite ».

centrer des blocs

Cette méthode est particulièrement utile lorsque l’on ne connaît pas la résolution du visiteur et que l’on souhaite réaliser un design toujours centré.

Vous devez respecter les règles suivantes :

donnez une largeur au bloc : width
indiquez des marges extérieures automatiques : margin: auto;