This article is my case of using elastic box for reference only
reference resources:
https://www.runoob.com/css3/css3-flexbox.html
https://www.cnblogs.com/makalochen/p/13389628.html
Basic html and css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item"> 1 </div>
<div class="item"> 2 </div>
<div class="item"> 3 </div>
<div class="item"> 4 </div>
<div class="item"> 5 </div>
<div class="item"> 6 </div>
</div>
</body>
</html>
css
body {
/*Set body background color*/
background-color: #f5f5f5;
}
.container {
/*Center outer margin*/
margin: 150px auto;
/*Maximum width*/
max-width: 800px;
/*Fixed height*/
height: 400px;
/*padding */
padding: 20px;
/*background color */
background-color: rgb(196,229,232);
/*The border is 5px solid */
border: 5px solid rgb(0, 181, 203);
}
.item {
/*background color */
background-color: rgb(0, 181, 203);
/*Font color*/
color: white;
/*wide*/
width: 100px;
/*high*/
height: 100px;
/*Margin */
margin: 2px;
/*Bold font*/
font-weight: bold;
/*font size*/
font-size: 5em;
/*Text centered*/
text-align: center;
}
effect
How to define elastic box
Here is a quote from the rookie tutorial
The elastic box consists of a flex container and a flex item.
Elastic containers are defined as elastic containers by setting the value of the display property to flex or inline flex.
The elastic container contains one or more elastic child elements.
Note: the outside of the elastic container and the inside of the elastic sub element are rendered normally. The elastic box only defines how the elastic sub elements are laid out in the elastic container.
Elastic sub elements are usually displayed in a row within the elastic box. By default, there is only one row per container.
From the above paragraph, we know that if the value of the display attribute of div is flex or inline flex, it can become an elastic container
Let's try
At this time, the css file is added
/*Set as elastic container*/ display: flex;
The content of the css file at this time
body {
/*Set body background color*/
background-color: #f5f5f5;
}
.container {
/*Center outer margin*/
margin: 150px auto;
/*Maximum width*/
max-width: 800px;
/*Fixed height*/
height: 400px;
/*padding */
padding: 20px;
/*background color */
background-color: rgb(196,229,232);
/*The border is 5px solid */
border: 5px solid rgb(0, 181, 203);
/*Set as elastic container*/
display: flex;
}
.item {
/*background color */
background-color: rgb(0, 181, 203);
/*Font color*/
color: white;
/*wide*/
width: 100px;
/*high*/
height: 100px;
/*Margin */
margin: 2px;
/*Bold font*/
font-weight: bold;
/*font size*/
font-size: 5em;
/*Text centered*/
text-align: center;
}
effect
You can see that the elements in the container are arranged directly from left to right after setting this attribute, because the default arrangement of the sub elements of the elastic box is from left to right
CSS3 elastic box properties
The following table lists the attributes commonly used in elastic boxes:
| attribute | describe |
|---|---|
| display | Specifies the type of HTML element box. |
| flex-direction | Specifies the arrangement of sub elements in the elastic container |
| justify-content | Sets the alignment of elastic box elements in the direction of the main axis (horizontal axis). |
| align-items | Sets the alignment of elastic box elements in the direction of the side axis (longitudinal axis). |
| flex-wrap | Sets whether to wrap lines when the child element of the elastic box exceeds the parent container. |
| align-content | Modify the behavior of flex wrap attribute, similar to align items, but not set the child element alignment, but set the row alignment |
| flex-flow | Abbreviations for flex direction and flex wrap |
| order | Sets the order in which the child elements of the elastic box are arranged. |
| align-self | Used on elastic child elements. Override the align items property of the container. |
| flex | Sets how the child elements of the elastic box allocate space. |
Flex direction sets the arrangement of child elements
Here only common
- From left to right
- Right to left
- From top to bottom
- Cut from the bottom
Other references:
https://www.runoob.com/cssref/css3-pr-flex-direction.html
The four values of the container attribute flex direction represent the different arrangement of child elements
Left to right (default)
flex-direction: row;
Right to left
flex-direction: row-reverse;
From top to bottom
flex-direction: column;
From bottom to top
flex-direction: column-reverse;
Flex wrap set line wrap
The maximum width of the container we set above is 800xp, and the width of elements in the container is 100px, that is to say, there can be at most 8. Now let's try 10
You can see that if the maximum width is exceeded, it will still be in one line. At this time, I want to make the child element wrap automatically when it exceeds the width of the parent container. What should I do?
css of container plus
/*Set the child element to wrap automatically when it exceeds the width of the parent container, and the first line is on the top*/ flex-wrap: wrap;
effect
Refer to other methods:
https://www.cnblogs.com/makalochen/p/13389628.html#flex-wrap attribute: defines line breaks
Flex flow sets the arrangement and wrapping of elements
This attribute is equivalent to the collection of the above two
- flex-direction
- flex-wrap
Example:
flex-flow: row-reverse wrap;
effect
