The use of align content in the blank space of flex layout

Time:2021-1-18

1、 The effect diagram of this paper is as follows: Flex layout is used on the right side of the layout, and if there are more than 3, the line will be wrapped.

The parent element code is as follows:

.nav-right{
  width: 75%;
  padding: 10px;
  display: flex;
  /*The default is horizontal*/
  Flex direction: row; / * sets the arrangement direction of child elements*/
  Flex Wrap: wrap; / * wrap if overflow*/
}

The child element code is as follows:


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

But the result is not as good as people want, there is a gap between the lines

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

.nav-right{
  width: 75%;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  Align content: remove the blank space between flex start / * sub elements, and place the item on the top of the container. */
}

align-content

effect:

The vertical arrangement of the items in the free box will be set.

Conditions:
The free box attribute must be set on the parent element display:flex; And set the arrangement mode as horizontal flex- direction:row; And set line feed, flex- wrap:wrap; So the setting of this property will work.  
Setting object:

This property is used to set the parent element for the items inside the container.
Value:
Stretch: the default setting is to stretch the space occupied by each item in the container. 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>
<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 space between items and center all items vertically.

<!DOCTYPE=html>
<html lang="zh-cn">
<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 removes the space between items and places the item on top of the container.

<!DOCTYPE=html>
<html lang="zh-cn">
<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 the items and place them at the bottom of the container.

align-content:flex-end;

Space between this will align the two ends of the project in the vertical direction. That is, the top item is aligned to the top of the container, and the bottom item is aligned to the bottom of the container. Leave the same interval between each item.

align-content:space-between;

Space around: this will keep the same length of space at the top and bottom of each project, so that the space between projects is twice that of a single project.

align-content:space-around;

Inherit: make this attribute of an element inherit from its parent element.
Innitial: make the element attribute the default initial value.

Note: part of the code comes fromDetailed explanation of align content attribute in CSS

So far, this article about the use of align content in the blank space of flex layout is introduced. For more information about the blank space of flex layout, please search the previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]