Propriété CSS align-items du modèle de boîte flexible et flexible-tutoriel CSS-php.cn

Propriété CSS align-items du modèle de boîte flexible et flexible

高洛峰

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

original

1923 Les gens l'ont consulté

Exemple

Alignez au centre les éléments de l'élément flexbox

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>

Copier après la connexion

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

7.0 -webkit-12.1L'attribut

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 语法

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.

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