introduce
In css2, there are box models in standard mode and weird box models in IE. These two schemes represent a rendering mode of box model. In css3, a new elastic box model is added, and the elastic box model is a new powerful and flexible layout scheme. Elastic box model is a new layout scheme proposed in css3. It is a new layout scheme for different screen widths and devices. It mainly adjusts the scheme of arranging, aligning and allocating the blank space for the sub-elements in a container.
New and Old Versions of Elastic Box Model
In the past, css3 has introduced an old version of the elastic box model. Compared with the new version of the elastic box model, the content of the old version is still somewhat different from the new version. Moreover, functionally speaking, the old version of the elastic box model is far less powerful than the new version of the box model. In terms of compatibility, both of them have compatibility problems below ie9 in the pc side, but in the mobile side, the compatibility of the old version of the elastic box model is better. But for us, we still have to focus on the new version of the elastic box model, because the old version of the elastic box model is inevitable, as the compatibility of mobile phones gradually improved, the old version will be eliminated. In addition, the new version has more powerful functions, and it is also worth our in-depth study. So for the old and new versions of the elastic box model, we just need to learn with a contrast mentality, master the new version, understand the old version, so that even if one day we need to use the old version, we can easily learn the old version of the elastic box model.
Related concepts
- principal axis
When elements are arranged in a row, the principal axis not only represents the direction of the element arrangement, but also can be understood as a horizontal line. Because our elements are arranged from left to right by default, we can say that by default, the starting position of the principal axis of the element is Left, right and end point right.
- Lateral axis
The vertical direction of the element is the lateral axis. By default, the starting point is the top and the ending point is the bottom.
- Flexible container
If we want to use the elastic box model, we need to convert the container into an elastic container. We say that a container containing sub-elements has display:flex, so the container becomes an elastic container.
- Elaston element
When the parent element of the child element becomes an elastic container, all the child elements of the child element naturally become an elastic child element.
How to create an elastic container:
display:flex | inline-flex
Elastic vessel properties
- flex-direction
Arrangement of Neutron Elements in Elastic Vessels (Spindle Arrangement)
Attribute values:
Row: Default in a row
row-reverse: Reverse horizontal alignment (right-aligned, back-to-front, last at the top).
column: Vertical arrangement.
column-reverse: Reverse the vertical arrangement, from bottom to top, with the last item at the top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-direction</title>
<style>
html,body {
margin:0;
padding:0;
}
nav {
height: 500px;
background-color: lightcyan;
display: flex;
flex-direction: row-reverse;/*Left 1234 turned right 4321*/
flex-direction: column;/*Left 1234 becomes up and down 1234*/
flex-direction: column-reverse;/*Turn down to top 1234*/
}
nav div {
width: 100px;
height: 100px;
background-color: lightblue;
line-height: 100px;
text-align: center;
font-weight: bold;
margin-right: 10px;
}
</style>
</head>
<body>
<nav>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
</nav>
</body>
</html>
web Front-end development learning Q-q-u-n: 767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
- flex-wrap
Whether to wrap lines when the child elements of the resilient box exceed the parent container
Attribute values:
nowrap: Default value. Provides that elements are not disassembled or columns are not disassembled.
Wap: Provides that elements are disassembled or disassembled when necessary.
wrap-reverse: Provides that elements are disassembled or disassembled when necessary, but in reverse order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style>
.box {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
/*Setting the property to wrap will automatically go to the next line when one line cannot fit.*/
/*flex-wrap:wrap;*/
/*Setting the property wrap-reverse causes a sort reversal, which is also multi-line, but becomes bottom-up.*/
flex-wrap: wrap-reverse;
}
.box div {
width: 100px;
height: 100px;
background-color: lightblue;
line-height: 100px;
text-align: center;
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<!--If the element does not change lines, then when the whole line cannot be placed, each element will be reduced accordingly.-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
web Front-end development learning Q-q-u-n: 767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
- flex-flow
Abbreviations of flex-direction and flex-wrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style>
.box {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
flex-flow: row wrap;
}
.box div {
width: 100px;
height: 100px;
background-color: lightblue;
line-height: 100px;
text-align: center;
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<!--If the element does not change lines, then when the whole line cannot be placed, each element will be reduced accordingly.-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
web Front-end development learning Q-q-u-n: 767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
- align-item
Setting the alignment of elastic box elements in the direction of side axis (longitudinal axis)
Relevant attribute values:
flex-start: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the starting boundary of the side axis of the line.
flex-end: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the end boundary of the side axis of the line.
center: Elastic box elements are centered on the side axis (longitudinal axis) of the row. If the row is smaller than the size of the elastic box element, the same length will spill over in both directions.
Baseline: If the inner and lateral axes of the elastic box element are the same, the value is equivalent to'flex-start'. In other cases, this value will participate in baseline alignment.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-item</title>
<style>
.box {
height: 600px;
background-color: lemonchiffon;
display: flex;
/*Default Lateral Axis Starting Point Lateral Arrangement*/
/*align-items: flex-start;*/
/*Lateral alignment of end points of lateral axis*/
/*align-items: flex-end;*/
/*Lateral alignment of end points of lateral axis*/
/*align-items: center;*/
align-items: baseline;
}
.box div{
width: 100px;
height: 100px;
background-color: lightsalmon;
text-align: center;
line-height: 100px;
font-weight: bold;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
web Front-end development learning Q-q-u-n: 767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
- ** align-content**
Modifying flex-wrap attributes is similar to align-items, but instead of setting child element alignment, it sets line alignment (the way rows and rows are aligned).
Relevant attributes:
flex-start: no row spacing
flex-end: bottom alignment without row spacing
center: No row spacing in the middle
space-between: Alignment at both ends, automatic allocation in the middle
space-around: Automatic Distance Allocation
Note that this property does not work on a one-line retractable container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-content</title>
<style>
nav {
height: 600px;
background-color: lemonchiffon;
display: flex;
/*Open multiple rows*/
flex-wrap: wrap;
/*Alignment of the upper and lower rows at the starting point of the side axle without row spacing*/
/*align-content: flex-start;*/
/*The end of the side axle is aligned with the top and bottom rows, and there is no row spacing. The first row is still on the top.*/
/*align-content: flex-end;*/
/*Side axis end alignment, the first line is still on, no row spacing*/
/*align-content:center;*/
/*Alignment at both ends, automatic allocation in the middle*/
/*align-content: space-between;*/
/*Automatic Distance Allocation*/
align-content:space-around;
}
nav div {
width: 100px;
height: 100px;
background-color: lightcoral;
margin:10px;
}
</style>
</head>
<body>
<nav>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
</nav>
</body>
</html>
web Front-end development learning Q-q-u-n: 767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
- justify-content
Setting the alignment of elastic box elements in the direction of the main axis (horizontal axis)
Relevant attributes:
flex-star: t default, top aligned
flex-end: end alignment
center: Centralized
space-between: Alignment at both ends, automatic allocation in the middle
space-around: Automatic Distance Allocation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>justify-content</title>
<style>
nav {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
/*justify-content: flex-start;*/
/*Axis alignment, right 1234*/
/*justify-content: flex-end;*/
/*Axis aligned, Center*/
/*justify-content: center;*/
/*Alignment at both ends, automatic allocation in the middle*/
/*justify-content: space-between;*/
/*Automatic Distance Allocation*/
justify-content: space-around;
}
nav div {
width: 100px;
height: 100px;
background-color: lightblue;
margin:10px;
}
</style>
</head>
<body>
<nav>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</nav>
</body>
</html>
Small partners who are interested in Web front-end technology can join our learning circle. They have been working for the sixth year. They can share some learning methods and details of practical development. 767-273-102 autumn skirt. How to learn the front-end from the zero foundation? Look at how our predecessors went ahead in the world of programming! Keep updating the latest teaching and learning methods (web front-end system learning route, detailed front-end project teaching videos), want to learn the front-end of the web, or transfer, or college students, as well as work to enhance their ability, small partners who are learning are welcome to join. We'll go with each other. Front end, front end, front end
Elastic subelement attributes
- order
Set the order of the child elements of the elastic box. Number ranking priority, the larger the number, the more backward, default to 0, supporting negative numbers.
- flex-grow
Sets or retrieves the expansion ratio of elastic box elements.
- flex-shrink
Set or retrieve the shrinkage ratio of elastic box elements.
- flex-basis
Used to set or retrieve elastic box expansion benchmark values
- flex
How to allocate space for the child elements of the resilient box is the abbreviated attributes of flex-grow, flex-shrink and flex-base attributes
- align-self
It is used in elastic element. Override the align-items property of the container. Values are the same as container attributes, except that this is a separate setting for an element.