当前位置：网站首页>Flex layout
Flex layout
2022-07-02 08:31:00 【Red blue purple】
Flex Layout
Personal blog ：Flex Layout
Introduce
Flex yes Flexible Box Abbreviation , To provide maximum flexibility for box models , Also known as " Telescoping layout ",“ Elastic layout ”,“ Expansion box layout ”,“ Elastic box layout ”.
Any container can be specified as Flex Layout （ Include inline elements ）
Set to Flex After layout , The child element float、clear and vertical-align Property will fail ,Flex The layout can be vertically centered
use Flex Elements of layout , be called Flex Containers （flex container）, abbreviation " Containers ". All its child elements automatically become container members , be called Flex project (flex item), abbreviation " project ".
Properties of the container
flex-direction attribute
flex-direction Property determines the direction of the spindle , That is, the arrangement direction of the project .
- row（ The default value is ）： The principal axis is horizontal , The starting point is on the left
- row-reverse: The principal axis is horizontal , The starting point is on the right
- column： The principal axis is perpendicular , The starting point is above
- column-reverse: The principal axis is perpendicular , Starting point is below
Example ：
row:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<style>
div {
display: flex;
/* Set to flex Layout */
width: 60%;
height: 300px;
background-color: pink;
margin: 20px auto;
flex-direction: row;
/* Set the spindle to horizontal , The starting point is on the left */
}
span {
width: 20%;
height: 150px;
background-color: purple;
margin-right: 5px;
color: #fff;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
result ：
row-reverse:
flex-direction: row-reverse;
column：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<style>
div {
display: flex;
/* Set to flex Layout */
width: 60%;
height: 300px;
background-color: pink;
margin: 20px auto;
flex-direction: column;
/* Set the spindle to the vertical direction , The starting point is above */
}
span {
width: 20%;
height: 150px; /* here 3 individual span The total height of is greater than that of the parent element 300px, But the result will be similar to 100px identical */
background-color: purple;
margin-right: 5px;
color: #fff;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
result ：
justify-content attribute
justify-content Property defines how items are arranged on the spindle
- flex-start( The default value is )： Align left
- flex-end： Right alignment
- center： In the middle
- space-between： Align both ends first , After that, the remaining projects divide the remaining space equally . The interval between items is equal
- space-around： All projects share the remaining space equally . The distance on both sides of each project is equal . The distance between items is twice as large as the distance between items and borders .
flex-wrap attribute
flex-wrap Attribute definition if one axis cannot row all items , Do you want to change lines
- nowrap( Default )： Don't wrap
- wrap： Line break
nowrap:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<style>
div {
display: flex;
width: 60%;
height: 400px;
background-color: pink;
margin: 20px auto;
flex-wrap: nowrap;
/* Set to no line breaks , By default, there is no line break */
}
span {
width: 20%;
height: 150px;
background-color: purple;
margin-right: 5px;
color: #fff;
}
div span:nth-child(2n) {
width: 30%;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
</html>
result ：
wrap:
Change the annotated part of the above code into flex-wrap: wrap;
result ：
align-items attribute
align-items Attribute defines the arrangement of child elements on the side axis （ A single ）
- flex-start: Alignment of the starting point of the side axis
When the spindle is horizontal , The side axis is vertical , The starting point is the upper , The end point is below ; When the spindle is in the vertical direction , The side axis is horizontal , The starting point is on the left , The end point is on the right
- flex-end: Alignment of end points of side axis
- center: Align the midpoint of the side axis （ Vertical center ）
- stretch( The default value is ): If the project has no height set or the height is set to auto, It takes up the height of the whole container , When the spindle is vertical , Then change the width
- baseline: Baseline alignment of the first line of text for the project
align-content attribute
align-content Attribute defines the arrangement of child elements on the side axis （ Multiple lines ）
It can only be used when line breaks occur in the project , There is no effect under single line
- flex-start: Alignment of the starting point of the side axis
- flex-end: Alignment of end points of side axis
- center: Align the midpoint of the side axis （ Vertical center ）
- space-between: The subitems are first distributed at both ends on the side axis , Divide the rest of the space equally .
- space-around: Children divide the remaining space equally on the side axis .
- stretch( The default value is )： Sets the height at which the child element bisects the parent element
space-between:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<style>
div {
display: flex;
width: 60%;
height: 500px;
background-color: pink;
margin: 20px auto;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
}
span {
width: 20%;
height: 100px;
background-color: purple;
margin: 10px;
color: #fff;
}
div span:nth-child(2n) {
width: 40%;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
</html>
result ：
space-around:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<style>
div {
display: flex;
width: 60%;
height: 500px;
background-color: pink;
margin: 20px auto;
flex-direction: row;
align-content: space-around;
flex-wrap: wrap;
}
span {
width: 20%;
height: 100px;
background-color: purple;
margin: 10px;
color: #fff;
}
div span:nth-child(2n) {
width: 40%;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
</html>
result ：
flex-flow attribute
flex-flow The attribute is flex-direction Properties and flex-wrap Attribute shorthand , The default value is row nowrap.flex-flow: row nowrap;
Project properties
flex attribute
flex Property defines the remaining space allocated by the subproject , use flex To show how many copies , It can be in the form of percentage , Where the percentage is relative to the container （ I.e. parent ） Speaking of .
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<style>
div {
display: flex;
width: 60%;
height: 130px;
background-color: pink;
margin: 20px auto;
flex-wrap: wrap;
}
div p {
color: #fff;
}
div p:nth-child(2n+1) {
width: 100px;
height: 100px;
background-color: purple;
}
div p:nth-child(2) {
flex: 1;
background-color: skyblue;
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
</html>
result ：
Analysis above ： Purple items have width , Blue items have no width , Blue item added flex:1, So the blue project takes up the remaining space .
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<style>
div {
display: flex;
width: 60%;
height: 120px;
background-color: pink;
margin: 20px auto;
flex-wrap: wrap;
}
span {
height: 100px;
background-color: purple;
margin: 10px;
color: #fff;
flex: 1;
}
div span:nth-child(2n) {
flex: 2;
background-color: skyblue;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
result ：
analysis ：
None of the subprojects has width , Finally according to the flex Allocate the remaining space , For example, the first purple project takes up the remaining space 1/（1 + 2 + 1 + 2） = 1 /6
align-self attribute
align-self Attribute controls how the subitems themselves are arranged on the side axis , Allow a single item to be arranged differently from other items , covering align-items attribute . The default value is auto, Represents the... That inherits the parent element align-items attribute , If there is no parent element , Is equivalent to stretch.
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<style>
div {
display: flex;
width: 60%;
height: 300px;
background-color: pink;
margin: 20px auto;
align-items: flex-start;
}
span {
width: 20%;
height: 100px;
background-color: purple;
margin: 10px;
color: #fff;
}
div span:nth-child(2n) {
align-self: flex-end;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
result ：
order attribute
order Property defines the order in which items are arranged . The smaller the numerical , The further up the line , The default value is 0, Can be negative .order: -1;
flex-shrink attribute
flex-shrink Attribute defines the reduction ratio of the project , The default is 1, That is, if there is insufficient space , The project will shrink .flex-shrink: 1;
If all of the items flex-shrink Attributes are 1, When space runs out , I'm going to scale it down . If a project flex-shrink The attribute is 0, Everything else 1, When there is not enough space , The former does not shrink .
flex-shrink Attribute is the result of being a container flex-wrap The attribute is nowrap when , The reason why all items will not wrap .
Reference link ：https://www.runoob.com/w3cnote/flex-grammar.html
pink Teacher front-end introductory tutorial
边栏推荐
- Force deduction method summary: double pointer
- Use Wireshark to grab TCP three handshakes
- OpenCV常用方法出处链接（持续更新）
- My VIM profile
- How to uninstall SQL Server cleanly
- 16: 00 interview, came out at 16:08, the question is really too
- Routing foundation - dynamic routing
- Global and Chinese market of electric cheese grinder 2022-2028: Research Report on technology, participants, trends, market size and share
- Network security - summary and thinking of easy-to-use fuzzy tester
- Fundamentals of music theory (brief introduction)
猜你喜欢
MySQL optimization
c语言自定义类型——结构体，位段（匿名结构体，结构体的自引用，结构体的内存对齐）
What is SQL injection
Rotating linked list (illustration)
sqli-labs第8关（布尔盲注）
Fundamentals of music theory (brief introduction)
Static library and dynamic library
Use Matplotlib to draw a preliminary chart
Intelligent manufacturing solutions digital twin smart factory
HCIA - data link layer
随机推荐
One of the reasons for WCF update service reference error
IP协议与IP地址
Opencv's experience of confusing X and Y coordinates
Use Wireshark to grab TCP three handshakes
Linked list classic interview questions (reverse the linked list, middle node, penultimate node, merge and split the linked list, and delete duplicate nodes)
Mutex
Matlab other
The best blog to explain the basics of compilation (share)
Don't know mock test yet? An article to familiarize you with mock
Makefile基本原理
When a custom exception encounters reflection
sqli-labs第8关（布尔盲注）
cve_ 2019_ 0708_ bluekeep_ Rce vulnerability recurrence
Matlab-其它
Carsim-问题Failed to start Solver: PATH_ID_OBJ(X) was set to Y； no corresponding value of XXXXX?
STM32-新建工程(参考正点原子)
On November 24, we celebrate the "full moon"
2022 Heilongjiang latest food safety administrator simulation exam questions and answers
[dynamic planning] p4170: coloring (interval DP)
CarSim learning experience - rough translation 1