CSS-Flex flexible layout notes

The article is transferred from Youdao Cloud Notes to the csdn blog. If there is a problem of image loss, you can read the original text

When I first came into contact with CSS layout, I often relied on the display + position + float properties for layout, which was very inconvenient in the process of using it. For example, some flow layouts, weighted layouts, etc., the most typical is the problem of element centering, which is believed to plague many beginners. For these problems, is there a once-and-for-all method to replace traditional complex layouts? Of course, there are. Flex flexible layouts can well replace most traditional layouts.

basic concepts

Define an elastic layout and set the display property to flex

display : flex

The flex layout has two important axes, namely the main axis and the cross axis (also known as the lateral axis) . The position of the main axis determines the arrangement direction of the layout (horizontal and vertical), and the layout direction is determined by attributes flex-direction. The default The value rowis the horizontal direction. The following is a schematic diagram in the horizontal direction

• Flexible container : The container set to flex with the display property is the flexible container
• Flexible item : each item child element in the container
• Principal axis : flex-directionthe attribute value that the principal axis depends on . When the attribute value rowis the principal axis is in the horizontal direction, when the attribute value columnis the principal axis is in the vertical direction.
• Cross axis (lateral axis ): the lateral axis is perpendicular to the main axis
• Main axis size and side axis size : determine the width and height of the sub-element item, the one corresponding to the main axis is called the main axis size, and the one corresponding to the side axis is called the side axis size

For a better understanding, the flexible items will be referred to as child elements in the following , and the flexible container will become the parent element.

From the perspective of usage, it can be divided into two parts: the attributes of the parent element and the attributes of the child element

The attributes of the parent element :

• flex-direction : Control the direction of the main axis, that is, the arrangement direction of the sub-elements.
• flex-wrap : Control whether the child elements wrap, provided that the remaining space of the current line is insufficient, that is, it cannot accommodate all the child elements.
• flex-flow: Optional attributes.
• justify-content : Control the alignment and space allocation of child elements in the main axis direction.
• align-items : Control the alignment of child elements in the lateral axis (cross axis) direction, in units of rows .
• align-content : Controls the alignment and space allocation of the sub-elements of each row in the lateral axis direction. It needs to cooperate with the flex-wrap property to take effect. The premise must have multiple rows , and its function is similar to the justify-content property.

Attributes of child elements :

• order : Controls the sorting of child elements, the smaller the value, the higher the row.
• flex-grow : Similar to the weight attribute in Android, the default value is 0 , and the remaining space will not be allocated.
• flex-shrink : When the parent element's container space is insufficient, the child element will shrink to fit the current space size, the default value is 1 , and it will be allocated when the space is insufficient.
• flex-basis : If you set a specific value, no matter whether the remaining space is sufficient, the size of the child element will not change. The default value is auto, which means automatic. If the width is set, the space occupied is width, and if there is no setting, it will be based on the content width.
• flex: Shorthand for flex-grow, flex-shrink and flex-basis
• align-self : Control the alignment of a single sub-element in the lateral axis direction, which is the same as align-items, except that align-items controls all sub-elements.

The code fixed in the following example

HTML

<div class="container">
	<div class="item" style="background-color: #56FF85;">1-广州</div>
	<div class="item" style="background-color: #ADFF2F;">2-深圳</div>
	<div class="item" style="background-color: #DD56F9;">3-上海</div>
	<div class="item" style="background-color: #99882F;">4-北京</div>	
</div>

CSS

.container{
	width: 400px;
	height: 200px;
	background-color: #556688;
	display: flex;
	
}
			
.container .item{
	display: flex;
	//这里主要是设置子元素的文本居中
	align-items: center;
	justify-content: center;
				
}

Attributes acting on the parent element

flex-direction

Used to control the layout direction of sub-elements, such as horizontal or vertical, with the following values:

• row (default value): The main axis is horizontal, arranged from left to right.
• row-reverse: The main axis is horizontal, arranged from right to left.
• column: The main axis is in the vertical direction, arranged from top to bottom.
• columu-reverse: The main axis is vertical, arranged from bottom to top.

Effect of row (default value) :

Note 1 is the four child elements, Note 2 is the parent element

The effect of column :

The other two row-reverse and columu-reverse will not be demonstrated

The above effect only sets the flex-direction on the parent element , and the child element does not set any attributes.

.container{
				width: 400px;
				height: 200px;
				background-color: #556688;
				display: flex;
				flex-direction: column;
				
}

flex-wrap

It is used to control whether the sub-elements wrap in the main axis direction. Simply put, it is to set whether to display all the sub-elements in a single line or multiple lines. Property value:

• nowrap: default value, no line break
• wrap: When the remaining space is insufficient, it will wrap
• wrap-reverse: When the remaining space is insufficient, it will wrap, and the first row will go to the bottom, in reverse order.

Add a few items to HTML:

<div class="container">
			<div class="item" style="background-color: #56FF85;">1-广州</div>
			<div class="item" style="background-color: #ADFF2F;">2-深圳</div>
			<div class="item" style="background-color: #DD56F9;">3-上海</div>
			<div class="item" style="background-color: #99882F;">4-北京</div>
			<div class="item" style="background-color: #56FF85;">5-厦门</div>
			<div class="item" style="background-color: #ADFF2F;">6-武汉</div>
			<div class="item" style="background-color: #DD56F9;">7-天津</div>
			<div class="item" style="background-color: #99882F;">8-杭州</div>
			<div class="item" style="background-color: #DD56F9;">9-东莞</div>
			<div class="item" style="background-color: #99882F;">10-佛山</div>
</div>

The default effect of nowrap :

Obviously, the content of each child element is squeezed to satisfy all child elements in one line.

The effect of wrap :

When the remaining space cannot accommodate the remaining child elements, it will be displayed in a new line, and the content of the child elements will not be squeezed.

wrap-reverse

Similarly, when the remaining space is insufficient, the child elements will be displayed in a new line, the difference is that the first line is in the bottom line, and the line is reversed in order.

flex-flow

flex-flowProperty is flex-directionthe flex-wrapabbreviation, is an optional attribute syntax:

flex-flow：<flex-direction>  <flex-wrap>

The front is the flex-direction attribute value, followed by the flex-wrap attribute value

For example, set the layout main axis to the horizontal direction, and the sub-elements are displayed in multiple lines:

.container{
				width: 250px;
				height: 130px;
				background-color: #556688;
				display: flex;
				flex-flow: row wrap;
				
			}

justify-content

Sample code:

.container{
				width: 250px;
				height: 130px;
				background-color: #556688;
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				
			}

Control the alignment and distribution of the main axis direction , attribute values:

• flex-start : left aligned
• flex-end : align right
• center : center alignment

• space-between : The performance is justified at both ends. Between is the meaning of the middle, which means that the extra white space is only allocated in the middle area of ​​the element

• Space-around : around means to surround the surroundings. The key point is that the two sides of the sub-elements are equidistant, and the width of the distance is only 1/2 of the width of the middle interval.

• Space-evenly : evenly means symmetrical and equal, which is expressed in the width of the interval of each sub-element and the width on both sides of it is the same.

align-items

A new CSS style is added to set the height of even-numbered child elements. This is just to reflect the difference in attribute values. In development, if you use flex layout, it is not recommended to set a fixed height or width for the child elements. Here is a departure from the concept of Flex flexibility . If the width and height of the child element are set separately, it will not take effect by default, it will be overwritten by the stretch default attribute value, and it will be stretched.

.container :nth-child(2n){
	height: 30px;
}

Alignment of all sub-elements controlled on the cross axis (cross axis direction, attribute value:

• stretch : The default value, stretch the child element. From the above rendering, you will find that the child element div does not have a height set, but it is still full of the height of the parent element. This is the result of stretching. Note that no matter whether the align-items attribute is set or not, the child element is stretched by default. If the height of the child element has no effect, it will be overwritten by the default value attribute, and it will still be stretched. This is a bit similar to the match_parent attribute set by the Android neutron View.
• flex-start : All child elements are aligned above the cross axis, and the child elements will not be stretched

• flex-end : All child elements are aligned below the cross axis, and the child elements will not be stretched

• center : All child elements are aligned in the center along the cross axis, and the child elements will not be stretched. It is often used for vertical center alignment.

• baseline : All sub-elements are aligned with the text baseline in the lateral axis direction, please refer to the baseline

align-content

align-items only controls the alignment of all child elements in the main axis direction of each row. Everyone aligns at the top or bottom, and the middle is based on the child element itself; the remaining space of the parent element cannot be allocated in the vertical direction (emphasis on) . Take multiple behaviors

.container{
				width: 250px;
				height: 130px;
				background-color: #556688;
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				
			}

The align-items property only controls the alignment of the main axis (1, 2, and 3 main axes). The spacing between each line and the spacing between the upper and lower sides of the parent element do not have a regular distribution, so the space cannot be allocated. And align-content can just solve this problem.

Personal understanding, there are as many main axes as there are rows in the flex layout

align-content is used to control the space allocation and alignment of sub-elements in the vertical direction (lateral axis), similar to the function of the justify-content attribute, and its attribute value is also the same as that of justify-content.

Sample code:

.container{
	width: 250px;
	height: 130px;
	background-color: #556688;
	display: flex;
	flex-flow: row wrap;
	align-content: stretch;
				
}

In flex layout, if the parent element is not set to a fixed height, the height of the parent element will follow the total height of the child element to expand.

• stretch : The default value, each row of sub-elements will be stretched proportionally, for example, there are only two rows of elements, and each row will be stretched at 50%. The height of the parent element shown below is 130px, and each row is equally divided by 1/3

• flex-start : align at the top without stretching

• flex-end : align at the bottom without stretching

• center : The performance is the overall vertical center alignment

• space-between : The top and bottom are aligned, and the spacing between each line is the same.

• Space-around : It has the same spacing (A) as the upper and lower ends, and the spacing of each line is also the same (B), but the spacing between A and B is not equal.

• space-evenly : The space between the upper and lower ends is the same as the space between each line, simply that the elements of each line are equally divided.

align-content must be used in conjunction with flex-wrap to wrap lines to take effect.

You need to pay special attention when using the align-items and align-content attributes. In the case of the default attribute value stretch, if the height of the child element is set, the height will not take effect, and it will be stretched to fill the parent element according to their respective rules.

Generally, align-items and align-content will not be used at the same time.

Attributes acting on child elements

order

Change the sort position of a certain child element. The smaller the value, the higher the ranking. The default value is 0. For example, the original element is sorted:

Note that the order of all child elements is 0 by default

Now sort 北京this sub-element to the first, as long as you set the order to -1 in the sub-element (Beijing).

#beijing{
	order: -1;
}

If at this time the 广州child element order is set to 1, sub-elements (Guangzhou) will be routed to the end.

#guangzhou{
	order: 1;
}

flex-grow

The grow in the attribute means expansion, which is to expand the size of the child element, provided that the remaining space is available in the parent element .

The remaining space is the size of the parent container minus the size of all child elements combined. If all sub-elements have the same flex-grow coefficient, then all items will get the same remaining space, otherwise it will be allocated according to the ratio defined by different flex-grow coefficients.

The default value of flex-grow is 0, which means that the self-element does not expand in size, and a negative number is invalid.

The child elements have the same flex-grow coefficient:

.container .item{
	flex-grow: 1;
				
}

Each child element equally divides the remaining space in the direction of the main axis. If the flex-grow coefficient is different for each child element, set the ratio 1:2:3:4

The larger the ratio, the larger the allocated space, which is similar to the weight attribute in Android.

flex-shrink

Shrink means shrinkage, and flex-shrink specifies the shrinking rules of child elements. The shrinkage occurs only when the sum of the width of the child elements is greater than the parent container .

flex-shrink does not support negative values. The default value is 1, which means that all flex items will shrink by default. If it is set to 0, it means that it will not shrink and keep the original fit-content width.

When flex-shrink is set to the default value of 1: The child element is obviously shrinking, the specific manifestation is that the text shrinks and wraps. Here is that all child elements are the default value 1

When flex-shrink is set to 0: the text is still displayed according to the original width, because the total width of the child element is larger than the width of the parent element, it is obvious that there is an overflow problem.

Set the flex-shrink to 0.5 or 1 for a single child element, and set the others to 0. Take the 广州child element as an example

#guangzhou{
	flex-shrink: 0.5;
}
#shengjun{
	flex-shrink: 0;
}
#shanghai{
	flex-shrink: 0;
}
#beijing{
	flex-shrink: 0;
}

It can be seen that only the 广州child elements are contracted, and 50% of the space is contracted to allow the 青岛child elements to take up. In addition, the sub-elements in the main axis direction must not have line breaks, and flex-shrink will take effect only if it is a line.

The functions of flex-grow and flex-shrink are exactly the opposite of those in advance. flex-grow will only take effect (expand) when the parent element is available, while flex-shrink will take effect (shrink) when the remaining available is insufficient.

flex-basis

Specify the initial size of the child element in the main axis direction, and tell the browser to reserve the size of the setting space.

By default, flex-basis refers to auto, which means that the size of the child element is automatically specified according to the content of the element. In addition, specific values ​​can be specified through flex-basis, as follows

.container{
				width: 250px;
				height: 100px;
				background-color: #556688;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
}

#guangzhou{
				flex-basis: 100px;
}

If 广州the flex-basis of the child element is set to 200px, the parent element is 250px, the actual 广州child element will not reach 200px, and other child elements will not overflow the parent container, because when the remaining space is insufficient, the child element flex-shrink defaults to Contraction.

If the child element has both flex-basis and width attributes set, the flex-basis attribute will have a higher priority and width will be ignored.

#guangzhou{
				flex-basis: 100px;
				width: 200px;
}
			

When using Flex flexibility, it is not recommended to set the width or height in the child elements. This will lose the flexibility. In addition, some properties of Flex will ignore the width or height.

flex

The flex property is short for flex-grow, flex-shrink and flex-basis. grammar:

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

The second and third parameters (flex-shrink and flex-basis) are optional. The default value is 0 1 auto.

Split as follows

• flex: none
• flex: auto
• flex: <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’>

flex: none is equivalent to flex: 0 0 auto

flex: auto is equivalent to flex: 1 1 auto

The flex attribute can specify one, two or three values. For the specific syntax, please refer to MDN's flex introduction

align-self

align-self is to control the alignment of child elements in the vertical direction (lateral axis), similar to align-items, align-self can individually control the alignment of a child element, and align-items is used in the parent element Control the vertical alignment of all child elements. Its attribute value is the same as align-items.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

If align-items is set on the parent element and align-self is also set on the child element, the align-self value will overwrite the align-items attribute value on the current child element.

.container{
				width: 250px;
				height: 100px;
				background-color: #556688;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
}

#guangzhou{
				align-self: flex-end;
}

reference

• CSS flexible box layout
• Display for yourself: flex layout tutorial