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

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

高洛峰

Libérer： 2017-02-23 09:55:39

original

1910 Les gens l'ont consulté

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>

Copier après la connexion

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.