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

Summary of the data storage structure of the nginx http module

Use of align-content in flex layout line break space

Summary of the data storage structure of the nginx http module

Things to note when writing self-closing XHTML tags

Vue implements a simple shopping cart example

A detailed introduction to the Linux directory structure

A Preliminary Study on JSBridge in Javascript

Detailed explanation of VUE Token's invalidation process

Solution to the "No such file or directory" prompt when executing executable files in Linux

Why developers must understand database locks in detail

MySQL code execution structure example analysis [sequence, branch, loop structure]

How to write a picture as a background and a link (background picture plus link)

Recommend

VirtualBox installs CentOS7 virtual machine and enhancement tools (picture and text)

How to deploy FastDFS in Docker

Detailed explanation of the use of Refs in React's three major attributes

In-depth understanding of Vue's data responsiveness

MySQL 5.7 deployment and remote access configuration under Linux

js canvas implements verification code and obtains verification code function

Detailed steps for adding hosts you need to monitor in zabbix

Detailed explanation of mysql permissions and indexes

MYSQL subquery and nested query optimization example analysis

setup+ref+reactive implements vue3 responsiveness

Detailed explanation of the best configuration for Nginx to improve security and performance

Tomcat uses thread pool to handle remote concurrent requests

Detailed tutorial on installing centos8 on VMware

Detailed explanation of JavaScript function introduction

Detailed explanation of the infinite restart problem when running the SpringBoot project docker environment