7. flex layout of mobile Web development
flex cloth elastic layout
-
Convenient operation, extremely simple layout and wide application of mobile terminal
-
Poor PC browser support
-
IE11 or lower, not supported or only partially supported
Traditional layout
-
Good compatibility
-
Cumbersome layout
-
Limitations, the mobile terminal can no longer have a good layout
Suggestions: 1. If it is a PC side page layout, we still use the traditional layout. 2. If it is a mobile terminal or a PC terminal page layout that does not consider compatibility, we still use flex elastic layout.
7.1 flex layout experience
Code block:
<!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>flex Layout experience</title>
<style>
div{
display: flex;
justify-content: space-around;
width: 80%;
height: 300px;
background-color: pink;
}
div span{
/* width: 150px; */
height: 150px;
margin-right: 5px;
background-color: palegreen;
flex: 1;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>design sketch:
7.2 flex layout principle
-
Flex is the abbreviation of flexible Box, which means "elastic layout". It is used to provide maximum flexibility for box model. Any container can be specified as flex layout.
-
When we set the flex layout for the parent box, the float, clear and vertical align attributes of the child elements will be invalidated.
-
Telescopic layout = elastic layout = telescopic box layout = elastic box layout = flex layout
-
The element with Flex layout is called flex container, or "container". All its child elements automatically become container members, called flex item, or "project".
-
In the experience, div is the parent container of flex
-
In the experience, span is the sub container flex project
-
Sub containers can be arranged horizontally or vertically
Summarize the principle of flex layout: add flex attribute to the parent box to control the position and arrangement of child boxes
7.3 common attributes of flex layout parent
3.1 common parent attributes
The following six attributes are set for the parent element
-
Flex direction: sets the direction of the spindle
-
Justify content: set the arrangement of child elements on the spindle. Flex Wrap: set whether the child elements wrap
-
Align content: sets the arrangement mode (multiple lines) of child elements on the side axis
-
Align items: sets the arrangement of child elements on the side axis (single line)
-
Flex flow: composite attribute, which is equivalent to setting both flex direction and flex wrap
3.2 flex direction set the direction of the main shaft ★ 1. Main shaft and side shaft
In flex layout, it is divided into two directions: main axis and side axis. The same name is row and column, x axis and y axis
-
The default spindle direction is the x-axis direction, horizontal to the right
-
The default side axis direction is the y-axis direction, horizontally downward
3.2 flex direction setting the direction of the spindle ★ 2 attribute value
The flex direction attribute determines the direction of the spindle (that is, the arrangement direction of items)
Note: the main axis and side axis will change, depending on who set the flex direction as the main axis, and the rest is the side axis. Our sub elements are arranged along the main axis
Test case:
<!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>flex Layout experience</title>
<style>
div{
/* Add flex attribute to parent */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* The default principal axis is the X-axis row, so the y-axis is the side axis*/
/* Our elements are arranged along the principal axis */
/* flex-direction: row; */
/* Learn about flipping */
/* flex-direction: row-reverse; */
/* We can set our principal axis to the y axis, and the x axis becomes the side axis */
flex-direction: column;
}
div span{
/* width: 150px; */
height: 150px;
margin-right: 5px;
background-color: palegreen;
/* flex: 1; */
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>3.3 justify content set the arrangement mode of sub elements on the spindle ★
The justify content attribute defines the alignment of items on the axis
Note: before using this attribute, be sure to determine which spindle is
-
The default value of flex start starts from the head. If the spindle is the x-axis, it starts from left to right
-
Flex end is arranged from the tail
-
center is centered on the spindle (if the spindle is x-axis, it is centered horizontally)
-
Space around bisecting the remaining space
-
Space between: trim both sides first, and then divide the remaining space equally (important)
Test case:
<!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>flex Set the arrangement of elements on the spindle 1</title>
<style>
div{
/* Add flex attribute to parent */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* The default principal axis is X-axis row */
flex-direction: row;
/* justify-content : Is to set the arrangement of child elements on the spindle */
/* The default value starts at the head, left to right if the spindle is the x-axis */
/* justify-content: flex-start; */
/* Arrange from the tail */
/* justify-content: flex-end; */
/* Center and align child elements */
/* justify-content: center; */
/* Divide the remaining space equally */
/* justify-content: space-around; */
/* Trim both sides first and then divide the remaining space equally (important) */
justify-content: space-between;
}
div span{
/* width: 150px; */
height: 150px;
margin-right: 5px;
background-color: palegreen;
/* flex: 1; */
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>Test case 2:
<!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>flex Layout experience</title>
<style>
div{
/* Add flex attribute to parent */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* The downloaded spindle is the Y-axis column */
flex-direction: column;
/* justify-content : Is to set the arrangement of child elements on the spindle */
/* The default value starts at the head, left to right if the spindle is the x-axis */
/* Center and align child elements */
/* justify-content: center; */
/* Trim both sides first and then divide the remaining space equally (important) */
justify-content: space-between;
}
div span{
/* width: 150px; */
height: 150px;
margin-right: 5px;
background-color: palegreen;
/* flex: 1; */
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>3.4 flex wrap setting whether child elements wrap ★
By default, items are arranged on a line (also known as "axis"). As defined by the flex wrap attribute, there is no line break in the flex layout by default.
Test case:
<!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>flex Layout experience</title>
<style>
div{
/* Add flex attribute to parent */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* flex In the layout, the default child element does not wrap. If it cannot be installed, the width of the element will be reduced and placed in the parent element */
/* Default no line breaks */
/* flex-wrap: nowrap; */
/* Line feed */
flex-wrap: wrap;
}
div span{
width: 150px;
height: 150px;
margin-right: 5px;
background-color: palegreen;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>3.5 align items set the arrangement mode of sub 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 items
-
Flex start from top to bottom
-
Flex end from bottom to top
-
Center crowded together (vertical center)
-
Stretch stretch (default)
Test case:
<!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>flex Layout experience</title>
<style>
div{
/* Add flex attribute to parent */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* The default principal axis is X-axis row */
justify-content: center;
/* We need a side axis centered */
align-items: center;
}
div span{
width: 150px;
height: 150px;
background-color: palegreen;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>3.6 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.
-
The default value of flex start is arranged at the head of the side axis
-
Flex end is arranged at the tail of the side shaft
-
center is displayed in the middle of the side axis
-
The space around subitem bisects the remaining space on the side axis
-
The space between subitems are distributed at both ends on the side axis, and then the remaining space is divided equally
-
stretch sets the height of the child element and bisects the height of the parent element
3.7 flex-flow
The flex flow attribute is a composite of the flex direction and flex wrap attributes
flex-flow: row wrap;
-
Flex direction: sets the direction of the spindle
-
Justify content: set the arrangement of child elements on the spindle. Flex Wrap: set whether the child elements wrap
-
Align content: sets the arrangement method (multiple lines) of child elements on the side axis align items: sets the arrangement method (single line) of child elements on the side axis
-
Flex flow: composite attribute, which is equivalent to setting both flex direction and flex wrap
7.4 common attributes of flex layout sub items
-
Shares of flex sub projects·
-
Align self controls how children are arranged on the side axis·
-
Order defines the order in which children are arranged (before and after)
4.1 flex properties
The flex attribute defines the remaining space allocated by the sub project, which is represented by flex.
.item{
flex:<number>; /* default 0 */
}
Test case:
<!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>flex Layout experience</title>
<style>
section{
/* Add flex attribute to parent */
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1){
width: 100px;
height: 150px;
background-color: palegreen;
}
section div:nth-child(2){
flex:1;
background-color: plum;
}
section div:nth-child(3){
width: 100px;
height: 150px;
background-color: papayawhip;
}
p{
/* Add flex attribute to parent */
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span{
flex: 1;
}
p span:nth-child(2){
flex: 2;
background-color: plum;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>4.2 align self controls the arrangement of sub items on the side axis
The align self property allows a single item to have a different alignment from other items and can override the align items property. The default value is auto, which means that it inherits the align items property of the parent element. If there is no parent element, it is equivalent to stretch.
span:nth-child(2) {
/*Set your own arrangement on the side axis*/
align-self: flex-end;
}
Test case:
<!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>flex Layout experience</title>
<style>
div {
/* Add flex attribute to parent */
display: flex;
width: 80%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
div span {
width: 150px;
height: 100px;
background-color: palegreen;
margin-right: 5px;
}
div span:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>4.3 the order attribute defines the order of items
The smaller the value, the higher the arrangement. The default value is 0.
Note: it is different from z-index.
Test case:
<!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>flex Layout experience</title>
<style>
div {
/* Add flex attribute to parent */
display: flex;
width: 80%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
div span {
width: 150px;
height: 100px;
background-color: palegreen;
margin-right: 5px;
}
div span:nth-child(2){
/* -1 Smaller than 0, so span2 will be in front of span1 */
order: -1;
}
div span:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>Module I Mobile terminal Season 1: CSDN