Maison >interface Web >tutoriel CSS >Propriété CSS align-items du modèle de boîte flexible et flexible
Propriété CSS align-items du modèle de boîte flexible et flexible
- 高洛峰original
- 2017-02-23 09:58:551968parcourir
Exemple
Alignez au centre les éléments de l'élément flexboxe388a4556c0f65e1904146cc1a846bee
p
{
affichage:flex;
aligner - articles :centre;
}
<!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: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
<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 premier navigateur qui prend en charge le numéro de version de 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-items | 11.0 | 20.0 | |||
| 属性 | |||||
| align-items | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- |
12.1 |
Définition et utilisation
align-items définit l'alignement des éléments flexibles dans la direction de l'axe transversal (axe vertical) de la ligne actuelle du conteneur flexible.
Astuce : La propriété align-items peut être remplacée à l'aide de la propriété align-self de chaque élément d'objet flex.
| 默认值： | stretch |
|---|---|
| 继承： | 否 |
| 可动画化： | 否。请参阅 CSS3动画属性、CSS3动画实例。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.alignItems="center" 效果预览 |
CSS 语法
align-items : stretch|center|flex-start|flex-end|baseline|initial|inherit ;
Valeur de l'attribut
| Valeur | Description | Test |
|---|---|---|
| étirement | Valeur par défaut. Les articles sont étirés pour s'adapter au conteneur. | Aperçu de l'effet |
| centre | L'article est situé au centre du conteneur. | Aperçu de l'effet |
| flex-start L'élément | se trouve au début du conteneur. | Aperçu de l'effet |
| extrémité flexible L'élément | se trouve au bout du conteneur. | Aperçu de l'effet |
| ligne de base | Les éléments sont situés à la 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. |