Maison > Article > interface Web > Modèle de boîte flexible et flexible, propriété CSS align-self

Modèle de boîte flexible et flexible, propriété CSS align-self

高洛峰original: 2017-02-23 09:55:391919parcourir

Exemple

Centrer un élément dans l'élément objet flex :

#myBluep
{
aligner-soi :centrer;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    display: flex;
    align-items: flex-start;
}

#main div {
    -webkit-flex: 1; /* Safari 6.1+ */
    flex: 1;
}

#myBlueDiv {
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>

<p><b>注意:</b> align-self 属性重写了容器的 align-items 属性。</p>
<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

</body>
</html>

Aperçu de l'effet

Prise en charge du navigateur

Le numéro dans le tableau indique le numéro de version du premier navigateur prenant en charge cet attribut.

Le numéro qui suit immédiatement -webkit-, -ms- ou -moz- est la première version qui prend en charge cet attribut de préfixe.


align-self	21.0	11.0	20.0
属性
align-self	21.0	11.0	20.0	9.0 7.0 -webkit-	12.1

7.0 -webkit-12.1

Définition et utilisation

l'attribut align-self définit l'alignement des éléments flexibles individuellement dans la direction de l'axe transversal (axe vertical). .

Remarque : L'attribut align-self peut remplacer l'attribut align-items du conteneur flexible.

默认值：	auto
继承：	否
可动画化：	否。请参阅 CSS3动画属性、CSS3动画实例。
版本：	CSS3
JavaScript 语法：	object.style.alignSelf="center" 效果预览

CSS 语法

Valeur de l'attribut

Valeur	Description	Test
auto	Valeur par défaut. L'élément hérite de la propriété align-items de son conteneur parent. "stretch" s'il n'y a pas de conteneur parent.	Aperçu de l'effet
étirement	L'élément est étiré pour s'adapter au conteneur.	Aperçu de l'effet
centre	est situé au centre du conteneur.	Aperçu de l'effet
flex-start L'élément	est situé au début du conteneur.	Aperçu de l'effet
extrémité flexible L'élément	est situé à l'extrémité du conteneur.	Aperçu de l'effet
ligne de base	est situé à la ligne de base du conteneur.	Aperçu de l'effet
initiale	Définissez cette propriété sur sa valeur par défaut. Voir initiale.	Aperçu de l'effet
hériter	Hérite de cette propriété de l'élément parent. Voir hériter.

Modèle de boîte flexible plus flexible CSS Pour les articles lié à l'attribut align-self, veuillez faire attention au site Web PHP chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Propriété CSS de justification de contenu de modèle de boîte flexible et flexibleArticle suivant：Propriété CSS de justification de contenu de modèle de boîte flexible et flexible

Articles Liés

Voir plus