oujood.com

Alignement des éléments dans un conteneur avec align-self

La propriété align-self de CSS est utilisée pour aligner les éléments sélectionnés dans un conteneur flexible de plusieurs manières différentes, telles que flex-end, center, flex-start, etc.

chercher |

Définition et utilisationde la propriété align-self

La propriété align-self est une sous-propriété du module Flexible Box Layout.

Elle permet de remplacer la valeur align-items pour des éléments flex spécifiques.

La propriété align-self spécifie l'alignement de l'élément sélectionné à l'intérieur du conteneur souple.

Remarque : La propriété align-self a la priorité sur la propriété align-items du conteneur souple.

La Syntaxe CSS
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
Valeurs par défaut auto
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.alignSelf="center"

Prise en charge de la propriété css align-items dans navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion 21 11209
21.1 -webkit-
21.1

Exemple aligner les éléments avec align-self      Copier le code

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 400px;
  height: 300px;
  border: 1px solid black;
  display: flex;
  align-items: flex-start;
}

#main div {
  flex: 1;
}


#Div_BLEU {
  align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">JE SUIS ROUGE</div>
  <div style="background-color:lightblue;" id="Div_BLEU">JE SUIS BLUE<BR>et je suis aligné avec aligne-self</div>  
  <div style="background-color:lightgreen;">JE SUIS VERT ET LE BLEU EST ALIGNé AVEC align-self</div>
</div>

</body>
</html>

Valeurs de la propriété align-items

Valeur Description
auto Valeur par défaut. L'élément hérite de la propriété align-items de son conteneur parent, ou "stretch" s'il n'a pas de conteneur parent.
Stretch Les éléments sont étirés pour s'adapter au conteneur
center Les éléments sont positionnés au centre du conteneur
flex-start Les éléments sont positionnés au début du conteneur
flex-end Les éléments sont positionnés à la fin du conteneur
baseline Les éléments sont positionnés à la ligne de base du conteneur.
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite de cette propriété de son élément parent. Lire à propos de inherit

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web