Flex layouts are called elastic layouts and are new to CSS3

Creating a Flex Box

display: flex; Or dispaly: inline - flex;Copy the code

The flex-direction attribute determines the direction of the spindle (that is, the alignment of the items)

flex-direction: row; /* The main axis is transverse, from left to right */[Default value]flex-direction: column; /* The main axis is horizontal, from top to bottom */
flex-direction: row-reverse; /* The main axis is transverse, from right to left */ 
flex-direction: column-reverse; /* The main axis is horizontal, bottom up */
Copy the code

The flex-wrap property determines whether to wrap lines

flex-wrap: nowrap; /* No line breaks */[Default value]flex-wrap: wrap; /* Newline, first line at top */ 
flex-wrap: wrap-reverse; /* Newline, first line below */
Copy the code

The inter-content attribute defines how the items are aligned on the spindle

justify-content: flex-start; /* Left align */[Default value]justify-content: flex-end; /* Right align */ 
justify-content: center; Centered / * * /
justify-content: space-between; /* Align both ends so items are equally spaced */ 
justify-content: space-around; /* Each item is equally spaced on both sides. The space between items is twice as large as the space between items and borders */
justify-content: space-evenly; /* Each item is equally spaced on both sides. The spacing between items is equal to the spacing between items and borders */
Copy the code

How to remember the last three? Instituted > space-around > space-between by comparing the left and right elements to both sides of the container

  • Space-evenly to the wall and the distance between the two is 1:1
  • The distance from the space-around to the wall and the distance between the two is 1:2
  • Space-between the distance to the wall and the distance between two pairs is 0:1

The align-items property defines how items are aligned on cross axes

align-items: stretch; /* Fill the height of the entire container */[Default value]align-items: flex-start; /* Align the starting points of the cross axes */
align-items: flex-end; /* Align the end points of the cross axes */ 
align-items: center; /* Align the midpoint of the intersecting axes */
align-items: baseline; /* Baseline alignment of the first line of text for the project */ 
Copy the code

The align-content attribute defines the alignment of multiple axes

align-content: stretch; /* The axis occupies the entire cross axis */[Default value]align-content: flex-start; /* Align the starting points of the cross axes */
align-content: flex-end; /* Align the end points of the cross axes */ 
align-content: center; /* Align the midpoint of the intersecting axes */
align-content: space-between; /* Align both ends so items are equally spaced */ 
align-content: space-around; /* Each item is equally spaced on both sides. The space between items is twice as large as the space between items and borders */
Copy the code