justify-content (set on parent element)
Sets the alignment of elastic box elements on the main axis (horizontal axis).
Value:
justify-content: flex-start | flex-end | center | space-between | space-around;flex-start: The elastic box element will align to the row start position. The first element aligns with the left starting boundary, and the subsequent elements are arranged next to the first element.
flex-end: The elastic box element will align to the end of the row. The whole is arranged at the end of the row.
center: display in the center as a whole.
space-between: Elastic box elements are evenly distributed.The boundary of the first element is aligned with the boundary of the main starting position of the row, and the boundary of the last element is aligned with the margin of the main ending position of the row., while the remaining telescopic box items are evenly distributed, ensuring that the space between the pairs is equal.
space-around: Elastic box elements are evenly distributed.The two ends retain half of the spacing between the child elements and the child elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex layout justify-content property</title>
<style rel="text/stylesheet">
.box {
display: -webkit-flex;
display: flex;
width: 400px;
height: 100px;
margin: 0;
padding: 0;
border-radius: 5px;
list-style: none;
background-color: #eee;
}
.box li {
margin: 5px;
padding: 10px;
border-radius: 5px;
background: #aaa;
text-align: center;
}
#box {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
#box2 {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
#box3 {
-webkit-justify-content: center;
justify-content: center;
}
#box4 {
-webkit-justify-content: space-between;
justify-content: space-between;
}
#box5 {
-webkit-justify-content: space-around;
justify-content: space-around;
}
</style>
</head>
<body>
<h2>justify-content: flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content: flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content: center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content: space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content: space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>align-items, align-self
Sets the alignment of elastic box elements in the vertical direction (vertical axis). where the align-items property is used for elastic containers, and align-self is used for elastic projects.
align-items: flex-start | flex-end | center | baseline | stretch;align-self: auto | flex-start | flex-end | center | baseline | stretch;