Maison >interface Web >tutoriel CSS >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:391958parcourir
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 |
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 语法
align-self : auto|stretch|center|flex-start|flex-end|baseline|initial |hériter;
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. |