Flex layout

The traditional CSS2 box model uses float-position layout. [PC side]
The flexible box model of CSS3 uses Flex layout. [Mobile terminal, responsive Bootstrap]

Box model classification

Box model classification: IE box model, standard box model, essential difference: width and height calculation method

Terms of Flex layout

Insert picture description here

Flex Container: Flex container.
A block-level element with flexbox layout (display: flex;) enabled is called a flex container.
Flex Item: Flex item.
The sub-block-level elements inside the Flex container.
(1) Main Size, the width of the Flex item in the main axis direction.
(2) Cross Size, the height of the Flex item in the cross axis direction.
Main Axis: The main axis of the Flex container. The main axis refers to the horizontal axis by default.
(1) Main Start, the starting position of the spindle.
(2) Main End, the end position of the spindle.
Cross Axis: The cross axis of the Flex container, also known as the "cross axis", the cross axis by default refers to the vertical axis

(1) Cross Start, the starting position of the cross axis.
(2) Cross End, the end position of the cross axis.
Note: After enabling Flex technology, float, clear, and vertical-align are not available.

Scenes

In the development of small programs and mobile terminals, it is necessary to consider the adaptation on terminal devices of various sizes.
In traditional web development, the box model is used, and the layout is realized through display: inline | block | inline-block, position, and float, which lacks flexibility and some adaptation effects are difficult to achieve. For
example, the following common information lists require different content heights. If you are sure, keep it vertically centered. In this case, it is recommended to use flex layout. In
Insert picture description here
an example where height information is not fixed, you only need to set the following two properties in the container to achieve vertical centering under uncertain content:

display sets the
horizontal alignment of the box model justify-content. container
{ display:flex; flex-decoration:column; justify-content:center;}

Flex layout properties in CSS3 acting on Flex Container

The way to enable Flex layout: display:flex;
(1) Flex Items are arranged along the main axis by default in the Flex Container.
(2) Flex Item does not allow line breaks in Flex Container by default.
If the width of the Flex Container is less than the sum of the widths of all Flex Items, each Flex Item will
divide the width of the Flex Container evenly in proportion to the original width.
(3) The Flex Item arranged on the main axis must have a width or flex-grow, and the height can be omitted or the height
can be auto.

Common parent attributes

1. flex-direction: Set the direction of the main axis.

Value:
(1) row-default value, which means that the direction of the main axis is horizontal. [Equivalent to float: left;]
(2) row-reverse, which means that the direction of the main axis is the opposite of the horizontal direction. [Equivalent to float: right;]
(3) Column, indicating that the direction of the main axis is the vertical direction, and the main axis and the cross axis are exchanged.
(4) column-reverse, indicating that the direction of the main axis is the opposite of the vertical direction.

2. justify-content: Set the main axis alignment of Flex Item in Flex Container.

Value:
(1) flex-start, the default value, Flex Item is aligned along the starting position of the main axis in the Flex Container.
(2) flex-end, Flex Item is aligned along the end position of the main axis in the Flex Container.
(3) center, Flex Item is aligned in the center along the main axis in the Flex Container.
(4) Space-between, the Flex Items are distributed evenly in the Flex Container, and
the interval between all Flex Items is the same.
(5) Space-around, the Flex Items are distributed evenly in the Flex Container, and
the distance between the two ends of all Flex Items is the same.
(6) Space-evenly, the distance between items, the distance between the first item and the end of the main axis from the first item and the end of the main axis is equal to the distance between items.

3. align-items: Set the cross axis alignment of Flex Item in Flex Container.

Value:
(1) flex-start, Flex Item is aligned along the starting position of the cross axis in the Flex Container.
(2) flext-end, Flex Item is aligned along the end position of the cross axis in the Flex Container.
(3) center, Flex Item is aligned in the center along the cross axis in the Flex Container.
(4) stretch, the default value, Flex Item stretches and aligns in the Flex Container.
When Flex Item does not specify height or height: auto, the height of Flex Item is the same as Flex Container
.
(5) Baseline, each Flex Item is aligned relative to the baseline.
A. If there is no text content inside the Flex Item, the Flex Item is at the top of the Flex Container
and the bottom of each Flex Item is aligned.
B. If the Flex Item has text content inside, each Flex Item is aligned relative to the text baseline

4. flex-wrap: Set whether to allow the Flex Item to be displayed in the Flex Container.

Value: (1) nowrap, the default value, no line feed is allowed.
(2) Wrap, allowing line breaks when the width of the Flex Container is less than the sum of each Flex Item.
(3) warp-reverse, allowing line wrapping and reverse layout in the vertical direction.

5. align-content: Set the alignment of Flex Item relative to the cross axis in the case of multiple spindles.

How to achieve the multi-spindle effect: (1) The width of the Flex Container is smaller than the sum of the widths of all Flex Items.
(2) Allow line breaks.
Value: (1) flex-start, multiple spindles are aligned to the starting position of the cross axis in the direction of the cross axis.
(2) Flex-end, multiple spindles are aligned to the end position of the cross axis in the direction of the cross axis.
(3) center, usually aligned with the center of the spindle in the cross-axis direction.
(4) stretch, the default value, stretch alignment.
(5) Space-between, the spacing between multiple spindles is consistent.
(6) Space-around, the distance between the two sides of each spindle is the same.
(7) Space-evenly, the spacing between the lines, and the distance between the first line and the end point of the cross axis and the end line of the end line are equal.
align-content is similar to align-items, but it is also easier to get confused.
First of all, make it clear: align-content will align multiple lines as a whole, and the container must enable line wrapping.
Compared:

Difference:
In terms of attribute values, align-content has two more values than align-items: space-between and space-around

6. Compound attributes

flex-flow attribute (composite attribute acting on Flex Container):
equivalent to a collection of direction and wrap
flex-flow: row nowrap; /* default value, arranged in order without line wrapping/
flex-flow:row-reverse wrap;/ Arrange in reverse order and wrap automatically*/

Flex layout properties in CSS3 acting on Flex Item (sub-items)

1, flex attributes

Define the remaining space allocated by the sub-item, and use flex to indicate the number of copies. It
can be expressed in numbers or percentages.

flex:  <number>; // flex 的值是数字
flex:1;

2. flex-basis: Set the Main Size occupied by the Flex Item. Item width property alternative

Value:
(1) Numerical value with unit.
(2) Percentage.
A. If the Flex Container allows line wrapping, 100% will occupy the entire width of the Flex Container.
B. If the Flex Container does not allow line breaks, 100% will occupy the remaining width of the Flex Container.
(3) auto, the default value, the size of the spindle space occupied by the Flex Item is subject to the width property. If the
width attribute is not set , the value is invalid.
If width and flex-basis exist at the same time and their values conflict, then Flex Item will take flex-basis as the standard.

flex-basis properties: •
When the container sets flex-direction to row or row-reverse, flex-basis and width exist at the same time, and flex-basis has a higher priority than width, that is, flex-basis replaces the width property at this time.
•
When the container sets flex-direction to column or column-reverse, flex-basis and height exist at the same time, and flex-basis has a higher priority than height, that is, flex-basis replaces the height attribute at this time.
• It should be noted that when one of flex-basis and width (or height) is auto, non-auto has a higher priority.

3. Order: Set the display order of Flex Items in the Flex Container (arrangement order along the main axis).

Value:
(1) 0, arranged according to the code writing order of Flex Item in Flex Container.
(2) Integers without units are arranged in ascending order of the integers.

4. align-self, set the alignment of the specific Flex Item relative to the cross axis itself.
Value:
(1) auto, the default value, cross-axis alignment is performed according to the attribute set by align-items. When the container does not set align-item, the attribute value is stretch.
(2) flex-start
(3) flex-end
(4) center
(5) baseline
(6) stretch
5. flex-grow: Set the enlargement ratio of the Flex Item in the Flex Container (the expansion factor of the item).

Value:
(1) 0, the default value, when the Flex Container has free space, the Flex Item does not have a zoom effect.
(2) An integer without a unit, which represents the enlargement ratio
of the Flex Item when the Flex Container has free space .
Expansion factor flex-grow:
• Scenario: grow English means <expand, expand, increase>, which means that when the width of the parent element is greater than the sum of the widths of the child elements, and the parent element has surplus, then flex-grow is fine Make the child element expand and share the space of the parent element.
• Value: The default value of flex-grow is 0, which means that the element does not claim the remaining space of the parent element. If the value is greater than 0, it means to claim.

6. flex-shrink: Set the shrinkage ratio of the Flex Item in the Flex Container (the shrinkage factor of the item).
Value:
(1) 1, the default value, which means that if the space is insufficient, the Flex Item will shrink.
(2) 0 means that if the space is insufficient, the Flex Item will not shrink either.
Functions of flex-shrink:
• When the item overflows in the main axis direction, the item can be compressed to fit into the container by setting the item shrink factor. The attribute value is the shrink factor of the item, and the attribute value is a non-negative number.
• When flex-shrink is not set, the default flex-shrink value is 1.

** 7. Compound attributes **

flex attributes (composite attributes acting on Flex Item, simply understand it):
Shorthand modes of flex-grow, flex-shrink, and flex-basis
Value:
(1) none, equivalent to 0 0 auto;
(2) auto, equivalent to 1 1 auto;
classic case-dice model

<div class="demo">
			<div class="box box1">
				<div class="dot"></div></div>
			<div class="box box2">
				<div class="dot"></div>
			</div>
			<div class="box box3">
				<div class="dot"></div>
			</div>
			<div class="box box4">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box5">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box6">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
			</div>
			<div class="box box7">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			
			<div class="box box8">
				<div class="dot"></div>
			</div>
			<div class="box box9">
				<div class="dot"></div>
			</div>
			<div class="box box10">
				<div class="dot"></div>
			</div>
			<div class="box box11">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box12">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box13">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			<div class="box box14">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			
			<div class="box box15">
				<div class="dot"></div>
			</div>
			<div class="box box16">
				<div class="dot"></div>
			</div>
			<div class="box box17">
				<div class="dot"></div>
			</div>
			<div class="box box18">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot1"></div></div>
			</div>
			<div class="box box19">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot1"></div></div>
			</div>
			<div class="box box20">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
			</div>
			<div class="box box21">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
		</div>

.demo{
    
    
	width: 920px;
	height: 400px;
	border: 1px solid gray;
	display: flex;
	flex-wrap: wrap;
}
.box{
    
    
	width: 120px;
	height: 120px;
	border-radius: 10px;
	background: rgba(0,0,0,0.7);
	display: flex;
	margin: 5px;
}
.dot{
    
    
	width: 30px;
	height: 30px;
	background: #F5F5F5;
	border-radius: 50%;
}
.dot1{
    
    
	width: 30px;
	height: 30px;
	background: transparent;
	border-radius: 50%;
}

.box2{
    
    
	flex-direction: row;
	justify-content: center;
}
.box3{
    
    
	justify-content: flex-end;
}
.box4{
    
    
	justify-content: space-between;
}
.box5{
    
    
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}
.box6{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box6 .row{
    
    
	width: 100%;
	display: flex;
}
.box6 .row:nth-of-type(2){
    
    
	justify-content: center;
}
.box6 .row:nth-of-type(3){
    
    
	justify-content: flex-end;
}
.box7{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box7 .row{
    
    
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.box7 .row:nth-of-type(2){
    
    
	justify-content: center;
}


.box8{
    
    
	flex-direction: column;
	justify-content: center;
}
.box9{
    
    
	justify-content: center;
	align-items: center;
}
.box10{
    
    
	justify-content: flex-end;
	align-items: center;
}
.box11{
    
    
	flex-direction: column;
	justify-content: space-between;
}
.box12{
    
    
	justify-content: space-between;
	align-items: flex-end;
}
.box13{
    
    
	justify-content: space-between;
}
.box13 .row{
    
    
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box14{
    
    
	justify-content: space-between;
}
.box14 .row{
    
    
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.box15{
    
    
	flex-direction: column;
	justify-content: flex-end;
}
.box16{
    
    
	align-items: flex-end;
	justify-content: center;
}
.box17{
    
    
	align-items: flex-end;
	justify-content: flex-end;
}
.box18,.box19{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box18 .row,.box19 .row{
    
    
	width: 100%;
	display: flex;
}
.box18 .row:nth-of-type(2){
    
    
	justify-content: center;
}
.box19 .row:nth-of-type(2){
    
    
	justify-content: flex-end;
}
.box20{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box20 .row{
    
    
	width: 100%;
	display: flex;
}
.box20 .row:nth-of-type(2){
    
    
	justify-content: flex-end;
}
.box21{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box21 .row{
    
    
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.box21 .row:nth-of-type(2){
    
    
	justify-content: center;
}

Slightly deleted and modified
————————————————
This article is the original article of the CSDN blogger "web_zsh"
Original link: https://blog.csdn.net/web_only_/article/details/100707608

CSS Flex layout