Maison > Article > interface Web > Propriété CSS de justification de contenu de modèle de boîte flexible et flexible

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

高洛峰original: 2017-02-23 09:51:332034parcourir

Instance

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

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>

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.

Plus d'articles liés à l'attribut CSS justification-content du modèle de boîte flexible flexible Veuillez faire attention au site Web PHP chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Attribut d'ordre CSS du modèle de boîte flexible flexibleArticle suivant：Attribut d'ordre CSS du modèle de boîte flexible flexible

Articles Liés

Voir plus