Once again, a simple and clear summary of flex layout…

Mind mapping

Flex layout

attribute

• The parent node container flex-Container
• Child nodes flex – item

Child node project

1. The value of order is an integer, which defaults to 0. The smaller the integer, the higher the order of items
2. Flex-grow is a magnification of other items
3. Flex-basis width is set in the parent node container because the space is insufficient and is digested proportionally
4. Flex-basis specifies the width of the item item
5. Flex is the sum of flex-grow flex-shrink flex-basis
6. Align-self allows the item to align itself on the vertical axis of the cross

Parent container

1. Flex-direction Main axis direction (general horizontal direction)
2. Flex-warp handles the problem of insufficient row alignment
3. Short for flex-flow 1 and 2 (Flex-flow: Row nowrap)
4. Justify -content The horizontal alignment of the main axis
5. Align-items cross axis (vertical) alignment with main axis
6. Align-content Alignment of multiple lines on intersecting axes

HTML case code:

<div class="flex-container">
	<div class="flex-item red">
		1
	</div>
	<div class="flex-item green">
		2
	</div>
	<div class="flex-item yellow">
		3
	</div>
	<div class="flex-item black">
		4
	</div>
</div>
Copy the code

CSS example code:

	html.body{
		background: #f7f7f7;
	}
	.flex-container{
		display: flex
		color: #fff;
	}
	.flex-item{
		width: 150px;
        height: 100px;
	}
	.red{
		background: red;
	}
	.green{
		background: green;
	}
	.yellow{
		background: yellow;
	}
	.black{
		background: black;
	}
Copy the code

The page is as follows:

flex-direction

Decided the spindle (usually the x axis) direction, namely, the direction of the project arrangement, there are four possible values: row (the default) | row – reverse | column | column – reverse

• Row: Items are arranged from left to right along the horizontal axis
• Column: The main axis is vertical, and the items are arranged along the main axis from top to bottom
• Row-reverse: The main axis is horizontal and items are arranged from right to left, inverting row
• Column-reverse: the main axis is vertical and the items are arranged from bottom to top, which is the reverse of column

.flex-container{
		display: flex;
		height: 100px;
    flex-direction: row; / * 1 * /
    flex-direction: row-reverse; / * 2 * /
    flex-direction: column; / * * / 3
    flex-direction: column-reverse;/ * * / 4
		color: #fff;
}
.flex-item{
	flex: 1
}
Copy the code

flex-wrap

By default, the item is arranged in a line, the main shaft, flex – wrap decided whether to line and line breaks when arrangement not bottom, the possible values nowrap (default) | wrap | wrap – reverse

• Nowrap: Automatically shrinks items without line breaks
• Wrap: line wrap with the first line at the top
• Wrap-reverse: Newline, first line below

.flex-container{
    display: flex;
    color: #fff;
    flex-wrap: nowrap; / * 1 * /
    flex-wrap: wrap; / * 2 * /
    flex-wrap: wrap-reverse; / * * / 3
}
.flex-item{
    width: 150px;
    height: 100px;
}
.red{
    width: 300px;   
}
Copy the code

Note: The flex-item width is defined as 300px 150px 150px 150px; So split the parent width according to the ratio 2:1:1:1. The actual width is 150px 75px 75px 75px (total 375px).

flex-flow

Is the flex – direction and flex – wrap shorthand, such as: row wrap | column wrap – reverse, etc. The default value is row nowrap, which is horizontal without line breaks.

.flex-container{
    flex-flow: row nowrap;
}
Copy the code

Combination:

First: When flex-wrap is set to NowRAP, attributes (width ratio, not actual px width) are arranged in flex-direction

Second: when flex-wrap is set to WRAP, the items are arranged according to their actual width, and if they are not, they go down

Third: when flex-wrap is set to wrap-reverse, the items are sorted by their actual width, and if not, they go up

justify-content

It is very important to determine the alignment of items on the main axis. Possible values are flex-start (default), flex-end, center, space-between, space-around.

When the spindle is along the horizontal direction, the specific meaning is

• Flex-start: left-align
• Flex-end: right-aligned
• Center: center
• Space-between: aligns both ends
• Space-around: evenly distributed along the axis

Note: Flex-start and flex-end do not work when item does not contain the parent item-container

.flex-container{
    justify-content: flex-start; / * 1 * /
    justify-content: flex-end; / * 2 * /
    justify-content: center; / * * / 3
    justify-content: space-between; / * * / 4
    justify-content: space-around; / * * / 5
}
.flex-item{
    width: 50px;
    height:50px;
}
Copy the code

align-items

Determine the item on the cross shaft alignment (Y), the possible values are the flex – start | flex – end | center | baseline | stretch

When the main axis is horizontal (Y-axis), its specific meaning is:

• Flex-start: top alignment
• Flex-end: bottom aligned
• Center: vertically aligned
• Baseline: align the bottom of the first line of text of item
• Stretch: When the height of item is not set, the item will be equal-height aligned with the container

Note: This parameter takes effect only when the height difference exists between parent flex-Container and child Flex-item

.flex-container{
    height: 200px;
    align-items: flex-start; / * 1 * /
    align-items: flex-end; / * 2 * /
    align-items: center; / * * / 3
    align-items: baseline; / * * / 4
    align-items: stretch; / * * / 5
}
.flex-item{
    height: 100px;
}
.red..green{
    font-size: 14px;
}
Copy the code

align-content

This property defines how the rows are aligned on the cross axes when there are multiple spindles, that is, when there is more than one line of item. Note that when there are multiple lines, the align-items property becomes invalid after align-content is defined.

Align-content possible values have the following meanings (assuming the main axis is horizontal) :

• Flex-start: left-align
• Flex-end: right-aligned
• Center: center
• Space-between: aligns both ends
• Space-around: evenly distributed along the axis
• Stretch: The rows will stretch according to their flex-grow value to fully occupy the remaining space

Note: 1. Set flex-wrap: wrap, otherwise by default, nowRap is proporoned to a full line. 2. Only when there is a height difference between the parent node flex-Container and the child node Flex-item, can the container function

.flex-container{
    flex-wrap: wrap;
    height:300px;
    background: # 969799;
    align-content: flex-start; / * 1 * /
    align-content: flex-end; / * 2 * /
    align-content: center; / * * / 3
    align-content: space-between; / * * / 4
    align-content: space-between; / * * / 5
    align-content: stretch; / * * / 6
}
Copy the code

Child node project

Item properties are set in the style of the item. Item has the following six attributes

• The value of order is an integer, which defaults to 0. The smaller the integer, the higher the order of items
• Flex-grow is a magnification of other items
• Flex-basis width is set in the parent node container because the space is insufficient and is digested proportionally
• Flex-basis specifies the width of the item item
• Flex is the sum of flex-grow flex-shrink flex-basis
• Align-self allows the item to align itself on the vertical axis of the cross

.flex-container{
    flex-flow: wrap;
}
.flex-items{
  order:1;
}
Copy the code

flex-grow

Defines whether the Item should be enlarged when the Flex container has extra space. The default value is 0, that is, it is not enlarged when there is extra space. Possible values are integers representing the magnification of different items

Note: If no width is specified for the item, a row width is allocated, and even if a width is specified, extra space is allocated

.flex-item{
	flex-grow: 1;
}
/ * 1 * /
.flex-contanier{
	flex-wrap: wrap;
}
/ * 2 * /
.flex-contanier{
	flex-wrap: nowrap;
}
Copy the code

flex-basis

Represents the amount of space the project occupies on the main axis. The default is auto.

.red{
	flex-basis: 100px;
}
.green {
	flex-basis: 100px;
}
Copy the code

align-self

The align-self attribute allows the item to have its own unique alignment on the cross axis. It has six possible values. The default is auto

• Auto: the same value as the parent element align-self
• Flex-start: top alignment
• Flex-end: bottom aligned
• Center: vertically aligned
• Baseline: align the bottom of the first line of text of item
• Stretch: When the height of item is not set, the item will be equal-height aligned with the container

Note: align-item and align-content have the same meaning as those in the parent flex-container. The difference is that align is set to a single item while align-items are set to a single item

.green{
    align-self: auto;
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
}
Copy the code

Note: align-self: baseline; align-self: stretch; As with 1 and 2, there is no further introduction here. You can refer to align-items

conclusion

In a real project, there are only a few flex properties that can be used. Remember that these properties can be used to achieve a good layout in a project

Commonly used attributes

• justify-content
• align-items
• flex
  
  

If there are deficiencies, please leave a comment… thank you