当前位置：网站首页>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 .

  1. row（ The default value is ）： The principal axis is horizontal , The starting point is on the left
  2. row-reverse: The principal axis is horizontal , The starting point is on the right
  3. column： The principal axis is perpendicular , The starting point is above
  4. 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

  1. flex-start( The default value is )： Align left
  2. flex-end： Right alignment
  3. center： In the middle
  4. space-between： Align both ends first , After that, the remaining projects divide the remaining space equally . The interval between items is equal
  5. 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

  1. nowrap( Default )： Don't wrap
  2. 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 ）

  1. 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

  1. flex-end: Alignment of end points of side axis
  2. center: Align the midpoint of the side axis （ Vertical center ）
  3. 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
  4. 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

  1. flex-start: Alignment of the starting point of the side axis
  2. flex-end: Alignment of end points of side axis
  3. center: Align the midpoint of the side axis （ Vertical center ）
  4. space-between: The subitems are first distributed at both ends on the side axis , Divide the rest of the space equally .
  5. space-around: Children divide the remaining space equally on the side axis .
  6. 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

原网站

版权声明
本文为[Red blue purple]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202151743426461.html

边栏推荐

猜你喜欢

随机推荐