Elastic box model
1. Comparison between traditional layout and flex layout
Traditional layout
The traditional layout relies on display, float and position to complete the layout,
However, some special layouts are inconvenient
flex layout
Convenient operation, simple layout and wide use of mobile terminal
pc browser support is poor
IE11 or earlier does not support flex or only some
Summary
If it is the pc side page layout, or the traditional way
If it is a mobile terminal or a compatible pc is not considered, flex is used
2.flex layout principle
1. After we set the parent box to flex layout, the float, clear and vertical align attributes of child elements will become invalid.
2.flex layout is also called telescopic layout, elastic layout, telescopic box layout and elastic box layout
3. Elements with flex layout are called flex containers
Container), referred to as "container". All its child elements automatically become container members, called flex projects (Flex)
item), referred to as "project".
Summary
By adding the flex attribute to the parent box, you can control the position and arrangement of the child boxes
3.flex initial experience
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=w, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* Add flex to parent */
display: flex;
width: 1000px;
background-color: orange;
}
.box div {
width: 100px;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
font-size: 50px;
font-weight: 700;
text-align: center;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
4. Flex dirdction spindle direction
1. In flex layout, pay attention to the problem of main shaft and side axis, such as x and y axes. that 's ok. column
2. The default spindle direction is the x-axis direction, horizontally to the right,
The default side axis direction is the y-axis direction, horizontally downward
3. Note: the main shaft and side shaft will change, depending on who is set as the main shaft in flex direction, and the rest is the side shaft. And our child elements are arranged along the main axis
| row | The default is left to right |
|---|---|
| row-reverse | Right to left |
| column | From top to bottom |
| column-reverse | From bottom to top |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* The premise of using flex layout is to set display: flex for the parent element;*/
display: flex;
/* Set spindle direction */
/* row The default value is from left to right */
/* flex-direction: row; */
/*row-reverse Right to left */
/* flex-direction: row-reverse; */
/* column From top to bottom */
/* flex-direction: column; */
/*column-reverse From bottom to top */
flex-direction: column-reverse;
width: 1000px;
height: 600px;
background-color: orange;
/* Line feed */
/* By default, projects are arranged on a single line (also known as a grid line). As defined by the flex wrap attribute, there is no newline in the flex layout by default. */
/* nowrap nowrap */
/* flex-wrap: wrap; */
}
.box span {
width: 200px;
height: 200px;
color: #fff;
font-size: 50px;
font-weight: 700;
text-align: center;
line-height: 150px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
5. Justify content sets the arrangement of child elements on the spindle
| flex-start | From left to right |
|---|---|
| flex-end | Go to the tail |
| center | Center |
| space-between | Align both ends equally spaced in the middle |
| space-around | There will be a blank gap on the left and right of all child elements |
| space-evenly | All clearances are equal |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=w, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* Add flex to parent */
display: flex;
/* Spindle arrangement justify content sets the arrangement of child elements on the spindle*/
/*flex-start From left to right */
/* justify-content: flex-start; */
/* flex-end Go to the tail */
/* justify-content: flex-end; */
/* center Center common*/
/* justify-content: center; */
/* space-between Align both ends equally spaced in the middle */
/* justify-content: space-between; */
/* space-around There will be a blank gap on the left and right of all child elements, resulting in a smaller gap on both sides than that in the middle, because the middle is the effect of the two gaps added together */
/* justify-content: space-around; */
/* space-evenly All clearances are equal */
justify-content: space-evenly;
width: 1000px;
height: 600px;
margin: 0 auto;
background-color: orange;
}
.box span {
width: 100px;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
font-size: 50px;
font-weight: 700;
text-align: center;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
6. Replace the spindle and the arrangement of sub elements
Note: pay attention to the switching of spindle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=w, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* Add flex to parent */
display: flex;
/* Change the direction of the spindle so that the direction of the spindle is from top to bottom */
flex-direction: column;
/* Center */
/* justify-content: center; */
/* space-evenly All clearances are equal */
/* justify-content: space-evenly; */
/* space-between Alignment at both ends and bisection in the middle are the most common*/
justify-content: space-between;
width: 1000px;
height: 600px;
background-color: orange;
}
.box div {
width: 100px;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
font-size: 50px;
font-weight: 700;
text-align: center;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
7. Align items sets the arrangement of child elements on the side axis (single line)
This attribute controls the arrangement of sub items on the side axis (y axis by default). It is used when the sub items are single item (single line)
| flex-start | Start with the head |
|---|---|
| flex-end | Start at the tail |
| center | Center display |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=w, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* Add flex to parent */
display: flex;
/* The alignment of single row child elements on the side axis is only 3*/
/* flex-start On top */
/* align-items: flex-start; */
/* flex-end At the bottom */
align-items: flex-end;
width: 1000px;
height: 600px;
background-color: orange;
}
.box div {
width: 100px;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
font-size: 50px;
font-weight: 700;
text-align: center;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
8. Align content sets the arrangement mode (multiple lines) of child elements on the side axis
Set the arrangement mode of sub items on the side axis, which can only be used when sub items break lines (multiple lines). It has no effect in a single line.
| flex-start | Top to bottom [ common ] |
|---|---|
| flex-end | From bottom to top |
| center | Center |
| space-between | Align ends equally spaced |
| space-around | The gap between the two ends of the element is equal |
| space-evenly | All clearances are equal |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=w, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* Add flex to parent */
display: flex;
/* Alignment of multiline child elements on the side axis
Must be used with flex Wrap: Wrap */
flex-wrap: wrap;
/* flex-start Top to bottom [ common ] */
/* align-content: flex-start; */
/* flex-end From bottom to top */
/* align-content: flex-end; */
/* center Center */
/* align-content: center; */
/* space-between Align ends equally spaced */
/* align-content: space-between; */
/* space-around The gap between the two ends of the element is equal */
/* align-content: space-around; */
/* space-evenly All clearances are equal */
align-content: space-evenly;
width: 1000px;
height: 600px;
background-color: orange;
}
.box div {
width: 150px;
height: 150px;
line-height: 100px;
background-color: red;
color: #fff;
font-size: 50px;
font-weight: 700;
text-align: center;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>7</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
difference
- Align items applies to single line cases, with only top, bottom, center, and stretch
- Align content is applicable to the case of line feed (multiple lines) (invalid in the case of single line). Attribute values such as upper alignment, lower alignment, centering, stretching and evenly allocating the remaining space can be set.
- The summary is to find align items in a single line and align content in multiple lines
9. Concatenation attribute / compound attribute flex flow attribute is flex direction and flex wrap
flex-flow:row wrap;
10.flex properties
The flex attribute defines the remaining space allocated by the sub project, and the number of copies is represented by flex.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=w, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* Add flex to parent */
display: flex;
width: 1000px;
height: 600px;
background-color: orange;
}
.box div {
/* Use flex to express the number of copies */
flex: 1;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
font-size: 50px;
font-weight: 700;
text-align: center;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div style="flex: 2;">2</div>
<div style="flex: 2;">3</div>
<div>4</div>
<div>4</div>
</div>
</body>
</html>
11. Align self controls the arrangement of sub items on the side axis
The default value is auto, which means that it inherits the align items attribute of the parent element. If there is no parent element, it is equivalent to stretch.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=w, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* Add flex to parent */
display: flex;
/* Side shaft centered */
/* align-items: center; */
width: 1000px;
height: 600px;
background-color: orange;
}
.box div {
width: 100px;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
font-size: 50px;
font-weight: 700;
text-align: center;
border: 2px solid #fff;
}
.box div:nth-child(2) {
/* Set your own arrangement on the side axis */
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
12. The order attribute defines the order of items
The smaller the value, the higher the arrangement. The default value is 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=w, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* Add flex to parent */
display: flex;
width: 1000px;
height: 600px;
background-color: orange;
}
.box div {
width: 100px;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
font-size: 50px;
font-weight: 700;
text-align: center;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<!-- /* order The smaller the value, the higher the front. By default, all values are 0. The larger the value, the lower the back */ -->
<div style="order: -1;">2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>