Flex layout and the six attributes of flex

Familiar with the Flexneed to understand Flexthe following these 6two CSSattributes:

/* 设置 Flex 模式 */
display: flex;

/* 决定元素是横排还是竖着排，要不要倒序 */
flex-direction: column;

/* 决定元素换行格式，一行排不下的时候如何排 */
flex-wrap: wrap;

/* flex-flow = flex-direction + flex-wrap */
flex-flow: column wrap;

/* 同一排下对齐方式，空格如何隔开各个元素 */
justify-content: space-between;

/* 同一排下元素如何对齐，顶部对齐、中部对齐还是其他 */
align-items: center;

/* 多行对齐方式 */
align-content: space-between;

Below we analyze these elements in detail:

Knowledge Point 1 . flex-direction: Determine the direction of the spindle

• row -(Default) horizontal direction, starting point is at the left end
• row-reverse -Horizontal direction, starting point is at the right end
• column -Vertical direction, starting point is at the upper edge
• column-reverse -Vertical direction, starting point is at the bottom edge

display: flex;

flex-direction: row | row-reverse | column | column-reverse;

Knowledge Point 2 . flex-wrap: When one axis (row) row no less than how to solve

• nowrap -(Default) no line break
• wrap -Line break, first line above
• wrap-reverse -New line, first line below

display: flex;

flex-wrap: nowrap | wrap | wrap-reverse;  

Knowledge. 3 . flex-flow: = Flow-Flex Flex Flex +-direction-wrap. That is, flex-flow is a collection of these two properties

• row nowrap -(Default) horizontal direction, starting point at the left end, no line break

display: flex;

flex-flow: <flex-direction> || <flex-wrap>;

Detailed reference 1and2

Knowledge Point 4 . justify-content: Define the project on the spindle alignment

• flex-start -Align left
• flex-end -Align right
• center -Center alignment
• space-between -Align both ends with a space in the middle
• space-around -Space surrounding

display: flex;

justify-content: flex-start | flex-end | center | space-between | space-around;

Knowledge Point 5 . align-items: How to align the definition of the project at the intersection of the axis

• flex-start -Align on top
• flex-end -Align the bottom, that is, the bottom of the text, picture, etc. are on the same line
• center -The middle is aligned, that is, no matter how high the text image is, put the middle of them on the same line
• stretch -Fill the height of the entire container with text and images, and force uniformity
• baseline -Align the first line of each item on the same line

display: flex;

align-items: flex-start | flex-end | center | stretch | baseline;

6 knowledge . align-content: Alignment defines a plurality of axes. If there is only one axis (only one line), this attribute has no effect

• flex-start -These lines are aligned at the top
• flex-end -These lines are aligned at the bottom
• center -These lines are aligned in the center
• stretch -Expand or zoom these lines to fill the height of the container
• space-between -Use spaces to fill in the middle of these lines
• space-around -Fill the sides and the middle of these lines

display: flex;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• This document is quoted from Yu Dieyou – Liang sir is also his own learning experience + document supplement
• Liang sirGit address: https://github.com/LiangJunrong/document-library