Propriété CSS de justification de contenu de modèle de boîte flexible et flexible-tutoriel CSS-php.cn

Propriété CSS de justification de contenu de modèle de boîte flexible et flexible

高洛峰

Libérer： 2017-02-23 09:51:33

original

2024 Les gens l'ont consulté

Instance

laisse un espace blanc autour des éléments dans l'élément

p
{
afficher :flexer;
justifier -contenu:espace-autour;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

#main div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</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.

justify-content

29.0 ; 21.0 -webkit-

11.0

28,0

属性
justify-content	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

18,0 -moz-

9.06.1 -webkit-

Définition et utilisation

justify-content est utilisé pour définir ou récupérer l'alignement de l'élément flex box dans la direction de l'axe principal (axe horizontal).

Astuce : Utilisez la propriété align-content pour aligner les éléments sur l'axe transversal (verticalement).

默认值：	flex-start
继承：	否
可动画化：	否。请参阅 CSS3动画属性、CSS3动画实例。
版本：	CSS3
JavaScript 语法：	object.style.justifyContent="space-between" 效果预览

CSS 语法

Valeur de l'attribut

Valeur	Description	test
flex-start	Valeur par défaut. 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
centre	L'article est situé au centre du conteneur.	Aperçu de l'effet
espace entre	Les éléments se trouvent à l'intérieur d'un conteneur avec un espace blanc entre les lignes.	Aperçu de l'effet
espace autour	Les articles sont placés dans des conteneurs avec un espace blanc avant, entre et après chaque ligne.	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.