flexible layout
Layout is to control a specified element to be placed in a specified position, and elastic layout is used to implement page layout.
There are several ways to implement page layout:
1. Table-based layout.
2. The float-based layout method mainly solves the problem of "horizontal arrangement".
3. Flexible layout also solves the problem of "horizontal arrangement".
4. Grid layout, which is a two-dimensional layout, is equivalent to a more advanced "table layout".
This time only flexible .
<!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>我真帅</title>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
}
div > span {
background-color: green;
width: 100px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
1. Enable flexible layout Set flex
for the parent element of the elements to be arranged horizontally . At this time, the elements in the flexible container are no longer "block level" and "inline elements", but become "flexible elements", which follow the flexible layout, and the size and margin can be set at this time.
display: flex;
After setting display: flex;, the above effect is formed, and you can see that its width and height are the same.
2. Set the horizontal arrangement of these elements
The following shows the arrangement on the left.
justify-content: flex-start;
The above representation is arranged on the right side.
justify-content: flex-end;
The following represents a centered arrangement.
justify-content: center;
The following is a spaced arrangement with margins at both ends
justify-content: space-around;
The following represents a spaced arrangement, and there will be no margins at both ends
justify-content: space-between;
3. Set the vertical arrangement of elements
If you want the green frame on the following page to move down, you need to use align-items: flex-end;
end means the downward arrangement.
After use, it will change to the following page.
You can also use center to achieve a centered layout.