La mise en page
C'est quoi?
La mise en page consiste à placer les éléments les uns par rapport aux autres selon nos désirs.
Jusqu'à présent, les éléments se placent les uns en dessous des autres.
Avec différentes techniques, on va pouvoir les centrer, les placer les uns à côté des autres...
Les FlexBox
Le « Flexible box » (ou FlexBox) introduit une nouvelle valeur flex par la propriété display ainsi que la propriété flex (et toutes ses sous propriétés).
Le flexbox va nous permettre de positionner et aligner des éléments HTML selon le support et sans même connaitre leur dimension à priori.
Le Flexbox va fonctionner sur le principe de conteneurs et d’éléments contenus.
Nous définissons un élément conteneur (souvent un div).
Nous y plaçons les différents éléments que l’on souhaite positionner dans la page et aligner les uns par rapport aux autres.
Les éléments contenus dans un conteneur vont former un groupe.
Nous allons ensuite organiser les éléments de manière précise les uns par rapport aux autres à l’intérieur de chaque groupe.
EXEMPLE
<div class="container">
<div class="bloc1">enfant1</div>
<div class="bloc2">enfant2</div>
<div class="bloc3">enfant3</div>
</div>.container {
border: 4px solid black;
}
.container div {
padding: 30px;
}
.container .bloc1 {
background: red;
}
.container .bloc2 {
background: yellow;
}
.container .bloc3 {
background: green;
}Grâce au display : flex du conteneur, les éléments contenus deviennent flexibles.
Maintenant que nos éléments contenus sont flexibles, nous allons pouvoir utiliser les différentes propriétés des Flexbox pour les organiser de façon précise.
.container {
display: flex;
}La propriété flex-direction va nous permettre de gérer le sens d’affichage des éléments (en ligne ou en colonne).
Elle va aussi nous servir à déterminer l’axe principal du modèle de Flexbox.
.container {
display: flex;
flex-direction: column;
}La propriété justify-content nous permet de distribuer l’espace entre les éléments sur l'axe principal.
.container {
display: flex;
flex-direction: column;
justify-content: center;
}La propriété align-items nous permet de distribuer l’espace entre les éléments sur l'axe secondaire.
.container {
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
}la propriété align-self va pouvoir organiser un élément en particulier. Notez que cette propriété sera prioritaire sur align-items.
La propriété align-self peut prendre les mêmes valeurs que align-items. Elle va s’appliquer à un élément flex-item en particulier et non pas au conteneur.
.bloc1 {
background: red;
align-self: flex-start;
}Ca arrive dans ton drive ;)
Normalement tu vas kiffer!!
Exo
La propriété position
Grâce à la propriété position, on va pouvoir positionner nos différents éléments par rapport à d’autres éléments ou par rapport à leur place d’origine entre autres.
La propriété CSS position supporte des valeurs différentes que nous allons étudier dans cette partie :
-
relative
-
fixed
-
absolute
Nous allons utiliser la propriété position conjointement aux propriétés top, right, bottom et left afin de positionner précisément nos éléments.
EXEMPLE
<div class="container">
<img src="chat.png" alt="image de chat" />
<h1>Mon chat!</h1>
</div>EXEMPLE
.container {
border: 4px solid black;
}
.container img {
width: 40%;
}
.container h1 {
width: 200px;
background: yellow;
}Position : relative
Un élément positionné grâce à position:relative va être repositionné relativement par rapport à sa position par défaut.
Par exemple, si on positionne un élément de façon relative et qu’on lui ajoute left:120px, l’élément sera déplacé de 120 pixels vers la droite par rapport à sa position par défaut.
.container img {
position: relative;
left: 120px;
}
Position : absolute
Cette valeur va nous permettre de positionner un élément de façon relative par rapport à son parent le plus proche auquel on a appliqué un positionnement spécifique (relative, fixed ou absolute).
Attention : si l’élément auquel on applique position:absolute ne possède pas d’élément parent positionné spécifiquement, celui-ci va se positionner par rapport à la page entière.
.container {
position: relative;
}
.container h1 {
position: absolute;
top: 50px;
left: 250px;
}Position : fixed
Un élément possédant un positionnement fixed va toujours rester à la même place, même si l’un de vos visiteurs scroll dans la page.
Cette valeur est très utile pour conserver un élément constamment visible, comme un menu par exemple.
.container h1 {
position: fixed;
top: 50px;
left: 250px;
}Il est tu sais où ^^
Exo
La propriété transform
La propriété transform modifie l'espace de coordonnées utilisé pour la mise en forme visuelle.
Grâce à cette propriété, il est possible de translater les éléments, de les tourner, d'appliquer des homothéties, de les distordre pour en changer la perspective.
.container h1 {
width: 200px;
transform: translate(200px, -80px);
}la mise en page
By Jonathan Blanc
