Comparison of traditional layout and flex layout
Traditional layout
- Good compatibility
- Cumbersome layout
- Limitations, cannot be well laid out on the mobile terminal
flex layout
- Convenient operation, extremely simple layout
- Poor support on pc
If you don't consider compatibility, you can use flex layout on the pc.
Principle of flex layout
flex: Flexible layout, used to provide maximum flexibility for boxed models, any container can be designated as flex layout
An element with flex layout is called a container, and all its child elements will automatically become members of the container, called flex items
Precautions
- When our parent box is set to flex layout, the float clear and vertical-align attributes of the child element will be invalid
- Flexible layout = flexible layout = flexible box layout = flexible box layout = flex layout
principle
Control the position and arrangement of the child boxes by adding flex attributes to the parent box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* justify-content属性定义了项目在主轴上的对齐方式。 */
justify-content: space-around;
}
span {
width: 100px;
height: 100px;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
flex parent property
flex-direction: set the direction of the main axis
In the flex layout, it is divided into a main axis and a side axis
The default main axis is horizontal to the right in the x direction
The default side axis is the y-axis horizontally downward
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
/* 设置主轴方向 */
flex-direction: row;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 设置主轴上子元素的排列方式 */
justify-content: space-around;
}
span {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
justify-content: Set the arrangement of child elements on the main axis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
/* 设置主轴方向 */
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
flex-direction: row;
border-radius: 10px;
justify-content: center;
}
span {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
flex-wrap: control whether child elements wrap
In the flex layout, the sub-elements in the flex item will not wrap, will always be displayed on one line, and the width will be narrower.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 决定子元素是否换行 */
flex-wrap: wrap;
}
span {
width: 100px;
height: 100px;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
align-items: Set the arrangement of the sub-elements on the cross axis (applicable to a single line)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 设置主轴上子元素的排列方式 */
justify-content: center;
/* 设置侧轴上的对齐方式 */
align-items: center;
}
span {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
align-content: Set the alignment of the child elements on the cross axis (suitable for multiple lines)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 设置主轴上子元素的排列方式 */
justify-content: center;
/* 决定子元素是否换行 */
flex-wrap: wrap;
/* 设置侧轴上的对齐方式 */
align-content: space-between;
}
span {
width: 180px;
height: 180px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</section>
</body>
</html>
The difference between align-items and align-content
flex-flow
Flex-flow is a composite attribute of flex-direction and flex-wrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
/* flex-flow是flex-direction属性及flex-wrap属性的复合属性 */
flex-flow: row wrap;
width: 600px;
height: 600px;
margin: auto;
border: 1px solid red;
border-radius: 15px;
}
span {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-weight: 700;
color: white;
background-color: purple;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</section>
</body>
</html>
flex child properties
The flex attribute defines the remaining space allocated by the sub-item, and uses flex to indicate how many copies it takes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 80%;
height: 400px;
border: 8px solid red;
border-radius: 20px;
margin: auto;
}
section span:nth-of-type(1) {
width: 200px;
height: 400px;
border-radius: 50%;
background-color: purple;
}
section span:nth-of-type(2) {
/* flex属性定义子项目分配的剩余空间，用flex表示占多少份数 */
flex: 1;
height: 400px;
border-radius: 50%;
background-color: red;
}
section span:nth-of-type(3) {
width: 200px;
height: 400px;
border-radius: 50%;
background-color: blue;
}
</style>
</head>
<body>
<section>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
align-self: Control the arrangement of children on the cross axis
The order attribute defines the order of the sub-items
The smaller the value, the higher the ranking, the default is 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 60%;
height: 600px;
border: 8px solid red;
border-radius: 10px;
}
section span {
width: 33.3%;
height: 400px;
border-radius: 50%;
background-color: red;
font-weight: 700;
line-height: 400px;
text-align: center;
color: black
}
section span:nth-of-type(3) {
/* 定义子项目的排列顺序 */
order: -1;
/* 定义子项在侧轴上的排列方式 */
align-self: flex-end;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
