Use of align-content in flex layout line break space

1. The effect diagram implemented in this article is as follows: Flex layout is used on the right side of the layout, and lines are wrapped when there are more than 3.

The parent element code is as follows:

.nav-right
  width: 75%;
  padding: 10px;
  display: flex;
  /* Default is horizontal*/
  flex-direction: row;/*Set the arrangement direction of child elements*/
  flex-wrap: wrap;/*wrap if overflow*/
}

The sub-element code is as follows:

.nav-right-item{
  width: 33.33%;  
  height: 120px;  
  text-align: center;
}

But the result is not as expected, there are blank spaces between the lines

The solution is to add align-content:flex-start to the parent element

.nav-right
  width: 75%;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start/*Cancel the blank space between child elements and place the items at the top of the container. */
}

align-content

effect:

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

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

This property works on the items within its container and is set on the parent element.
Value:
stretch: The default setting stretches the space occupied by each item in the container, filling it by adding blank space below each item. By default, the first item is arranged from the top of the container.

<!DOCTYPE=html>
<html lang="en">
<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>
<div id="father">
    <div class="son1">q</div>
    <div class="son2">w</div>
    <div class="son3">e</div>
    <div class="son3">e</div>
    <div class="son3">e</div>
</div>
</body>
</html>

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

<!DOCTYPE=html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
About Document Element Testing</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>
 
<div id="father">
    <div class="son1">q</div>
    <div class="son2">w</div>
    <div class="son3">e</div>
    <div class="son4">e</div>
    <div class="son5">e</div>
</div>
 
</body>
</html>

flex-start: This will remove the space between items and put the items at the top of the container.

<!DOCTYPE=html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
About Document Element Testing</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>
 
<div id="father">
    <div class="son1">q</div>
    <div class="son2">w</div>
    <div class="son3">e</div>
    <div class="son4">e</div>
    <div class="son5">e</div>
</div>
 
</body>
</html>

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 vertically. That is, the upper item is aligned to the top of the container, and the lower item is aligned to the bottom of the container. Leave the same spacing between each item.

align-content:space-between;

space-around: This will leave the same length of space above and below each item, making the space between items twice the space of a single item.

align-content:space-around;

inherit: Causes the element to inherit this property from its parent element.
innitial: Sets the element's attribute to the default initial value.

Note: Some of the code in this article comes from the detailed explanation of the align-content attribute in CSS

This is the end of this article about the use of align-content in flex layout line breaks and blank spaces. For more information about flex line breaks and blank spaces, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Mysql date formatting and complex date range query

>>: The top fixed div can be set to a semi-transparent effect