From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/align-self/index.md | 183 +++++++++++++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 files/fr/web/css/align-self/index.md (limited to 'files/fr/web/css/align-self/index.md') diff --git a/files/fr/web/css/align-self/index.md b/files/fr/web/css/align-self/index.md new file mode 100644 index 0000000000..02b2574984 --- /dev/null +++ b/files/fr/web/css/align-self/index.md @@ -0,0 +1,183 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/align-self +--- +
{{CSSRef}}
+ +

La propriété CSS align-self permet d'aligner les objets flexibles d'une ligne flexible ou d'une grille en surchargeant la valeur donnée par {{cssxref("align-items")}}.

+ +

Si l'un des objet a une marge automatique (auto) pour l'axe perpendiculaire à l'axe principal, align-self sera ignoré. Lorsque le conteneur est une grille, align-self permet d'aligner l'élément au sein de la zone de grille. Si le conteneur est une boîte flexible, l'alignement se fait selon l'axe secondaire.

+ +
{{EmbedInteractiveExample("pages/css/align-self.html")}}
+ +

Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+align-self: auto;
+align-self: normal;
+
+/* Alignement géométrique */
+/* align-self ne gère pas les valeurs left et right */
+align-self: center; /* Les éléments sont alignés sur le centre */
+align-self: start; /* Les éléments sont alignés au début de l'axe */
+align-self: end; /* Les éléments sont alignés à la fin de l'axe */
+align-self: self-start; /* Les éléments sont alignés par rapport à leur début */
+align-self: self-end; /* Les éléments sont alignés par rapport à leur fin */
+align-self: flex-start; /* Les éléments flexibles sont alignés au début */
+align-self: flex-end; /* Les éléments flexibles sont alignés à la fin */
+
+/* Alignement selon la ligne de base */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* Les objets dimensionnés avec 'auto' sont */
+                     /* étirés pour remplir le conteneur */
+
+/* Alignement avec gestion du dépassement */
+align-self: safe center;
+align-self: unsafe center;
+
+/* Valeurs globales */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+ +

Valeurs

+ +
+
auto
+
La valeur est calculée par rapport à celle de {{cssxref("align-items")}}.
+
normal
+
L'effet de ce mot-clé dépend du mode de disposition utilisé : +
    +
  • Pour une disposition absolue, ce mot-clé est synonyme de start pour les boîtes remplacées positionnées de façon absolue, il est synonyme de stretch pour les autres boîtes positionnées de façon absolue.
    • +
  • Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de stretch.
    • +
  • Pour les éléments flexibles, ce mot-clé est synonyme de stretch.
    • +
  • Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de stretch, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme start.
    • +
  • Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.
    • +
+
+
self-start
+
Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.
+
self-end
+
Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.
+
flex-start
+
Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.
+
flex-end
+
Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.
+
center
+
La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.
+
baseline
+ first baseline
+ last baseline
+
Indique l'alignement par rapport à la ligne de base.
+ Si besoin, la valeur first baseline est remplacée par start et last baseline est remplacée par end.
+
stretch
+
Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par {{cssxref("max-height")}}/{{cssxref("max-width")}} ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.
+
safe
+
Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur start avait été utilisée.
+
unsafe
+
Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

CSS

+ +
.flex-container {
+  height: 250px;
+  display: flex;
+}
+
+.element-flex {
+  background: palegreen;
+  width: 100px;
+  padding: 5px;
+  margin: 5px;
+  line-height: 50px;
+  font-size: 2em;
+}
+
+.center {
+  -webkit-align-self: center;
+  align-self: center;
+}
+
+.baseline {
+  -webkit-align-self: baseline;
+  align-self: baseline;
+}
+
+.stretch {
+  -webkit-align-self: stretch;
+  align-self: stretch;
+}
+
+ +

HTML

+ +
<div class="flex-container">
+  <p class="element-flex center">Milieu</p>
+  <p class="element-flex baseline">Base</p>
+  <p class="element-flex stretch">Étiré</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Box Alignment")}} 
{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Flexbox")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

Prise en charge pour les dispositions avec les boîtes flexibles (Flexbox)

+ +

{{Compat("css.properties.align-self.flex_context")}}

+ +

Prise en charge pour les dispositions avec les grilles CSS

+ +

{{Compat("css.properties.align-self.grid_context")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf