Flex layout flexible layout
1. Any container can be specified as a Flex layout:
display: flex;//Block element
display: inline-flex; // Inline elements
1. flex-direction: the arrangement direction of the items
flex-direction: row || row-reverse || column || column-reverse
2. flex-wrap: how to wrap if one axis cannot be arranged
flex-wrap: nowrap || wrap || wrap-reverse
3、flex-flow: flex-direction flex-wrap
4. justify-content: the alignment of the item on the main axis
justify-content: flex-start || center || flex-end || space-between || space-around || space-evenly
5. align-items: how items are aligned on the cross axis
align-items: flex-start || center || flex-end || baseline || stretch
6. align-content: the alignment of multiple axes. This property has no effect if the item has only one axis
align-content: flex-start || center || flex-end || space-between || space-around
2. Flex Items project
1. order: The order in which the items are arranged. The smaller the value, the higher the ranking, the default is 0
2. flex-grow: The enlargement ratio of the item, the default is 0, that is, if there is remaining space, it will not be enlarged
3. flex-shrink: the reduction ratio of the item, the default is 1, that is, if the space is insufficient, the item will shrink
4. flex-basis: The main size occupied by the item before allocating excess space (main size)
5、flex: flex-grow flex-shrink flex-basis
6、align-self: auto || flex-start || center || flex-end || stretch || baseline