Detailed explanation of align-content usage in css-CSS Tutorial-php.cn

Detailed explanation of align-content usage in css

巴扎黑

Release： 2017-06-28 14:23:50

Original

1737 people have browsed it

align-content

Function:

will set the vertical arrangement of each item inside the free box.

Conditions:
The free box attribute display:flex; must be set to the parent element, and the arrangement mode is set to horizontal arrangement flex -direction:row; and set line wrapping, flex-wrap:wrap; so that the setting of this property will take effect.
Setting object:

This attribute works on the items inside her container and sets the parent element.

Value:
stretch: The default setting will stretch the space occupied by each item in the container, and the filling method is to add blank space below each item. The first item is arranged from the top of the container by default.

<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
Align-content
</title>
<style>

#father{
    
    width:200px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:strech;
    height:200px;
    background-color:grey;
}.son1{
    
      height:30px;
    width:100px;
    background-color:orange;
}.son2{
    
    height:30px;
    width:100px;
    background-color:red;
}.son3{
    
      height:30px;
    width:100px;
    background-color:#08a9b5;
}</style>
</head>
<body>

<p id="father">

<p class="son1">
q
</p>

<p class="son2">
w
</p>

<p class="son3">
e
</p>
<p class="son3">
e
</p>
<p class="son3">
e
</p>



</p>

</body>
</html>

Copy after login

Center: This will remove the space between items and center all items vertically .

<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
关于文档元素测试
</title>
<style>

#father{
    
    width:200px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:center;
    height:200px;
    background-color:grey;
}.son1{
    
      height:30px;
    width:100px;
    background-color:orange;
}.son2{
    
    height:30px;
    width:100px;
    background-color:red;
}.son3{
    
      height:30px;
    width:100px;
    background-color:#08a9b5;
}.son4{
    
      height:30px;
    width:100px;
    background-color:#9ad1c3;
}.son5{
    
      height:30px;
    width:100px;
    background-color:rgb(21,123,126);
}</style>
</head>
<body>

<p id="father">

<p class="son1">
q
</p>

<p class="son2">
w
</p>

<p class="son3">
e
</p>
<p class="son4">
e
</p>
<p class="son5">
e
</p>



</p>

</body>
</html>

Copy after login

Flex-start: This will remove the white space between items and place the items on top of the container.

<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
关于文档元素测试
</title>
<style>

#father{
    
    width:200px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:flex-start;
    height:200px;
    background-color:grey;
}.son1{
    
      height:30px;
    width:100px;
    background-color:orange;
}.son2{
    
    height:30px;
    width:100px;
    background-color:red;
}.son3{
    
      height:30px;
    width:100px;
    background-color:#08a9b5;
}.son4{
    
      height:30px;
    width:100px;
    background-color:#9ad1c3;
}.son5{
    
      height:30px;
    width:100px;
    background-color:rgb(21,123,126);
}</style>
</head>
<body>

<p id="father">

<p class="son1">
q
</p>

<p class="son2">
w
</p>

<p class="son3">
e
</p>
<p class="son4">
e
</p>
<p class="son5">
e
</p>



</p>

</body>
</html>

Copy after login

flex-end: This will remove the space between items and place the items at the bottom of the container.

align-content:flex-end;

space-between This will align the items at both ends vertically. That is, the top item is aligned with the top of the container, and the bottom item is aligned with the bottom of the container. Leave equal spacing between each item.

align-content:space-between;

Space-around: This will keep the same length of space at the top and bottom of each item, so that The spacing between items is twice the spacing of individual items.

align-content:space-around;

Inherit: Causes this attribute of the element to be inherited from its parent element.
initial: Make this attribute of the element the default initial value.

The above is the detailed content of Detailed explanation of align-content usage in css. For more information, please follow other related articles on the PHP Chinese website!