Home > Article > Web Front-end > CSS justify-content property of Flexible flexible box model

CSS justify-content property of Flexible flexible box model

高洛峰Original: 2017-02-23 09:51:332027browse

Example

Leave space around items in the e388a4556c0f65e1904146cc1a846bee element of a flexbox object:

p
##{
display: flex;
justify -content: space-around;
}

<!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>

Effect preview

Browser support

The number in the table indicates the version number of the first browser that supports this attribute.

The number immediately following -webkit-, -ms- or -moz- is the first version that supports this prefix attribute.

Attributesjustify-content29.011.028.09.017.0

Definition and usage

justify-content is used to set or retrieve the alignment of the flexible box element in the main axis (horizontal axis) direction.

Tip: Use the align-content property to align items on the cross axis (vertically).


	21.0 -webkit-		18.0 -moz-	6.1 -webkit-

##Inheritance: NoCan be animated: No. Please refer to Version: CSS3JavaScript Syntax:

CSS 语法

Attribute value

Default value:	flex-start

	CSS3 animation properties, CSS3 animation examples.

	object. style.justifyContent="space-between" Effect preview

Value	Description	Test
##flex-start	default value. The item is at the beginning of the container.	Effect preview
##flex-end	The item is at the end of the container.	Effect Preview
center	The item is located in the center of the container.	Effect preview
##space-between	Items are located in containers with white space between rows.	Effect preview
space-around	# Items are placed in containers with white space before, between, and after each row.	Effect Preview
##initial	Set this property to its default value. See initial.	Effect preview
##inherit	Inherits this attribute from the parent element. See inherit.

More articles related to CSS justify-content attribute of Flexible flexible box model Please pay attention to PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS order attribute of Flexible flexible box modelNext article：CSS order attribute of Flexible flexible box model

See more

CSS justify-content property of Flexible flexible box model

Example

Definition and usage

CSS 语法

Attribute value

Related articles