Flex布局
flex-direction: row
item_1
item_2
item_3
flex-direction: row-reverse
item_1
item_2
item_3
flex-direction: column
item_1
item_2
item_3
flex-direction: column-reverse
item_1
item_2
item_3
flex-wrap：nowrap
item_1
item_2
item_3
item_4
item_5
item_6
flex-wrap：wrap
item_1
item_2
item_3
item_4
item_5
item_6
flex-wrap：wrap-reverse
item_1
item_2
item_3
item_4
item_5
item_6
flex-flow: column wrap
item_1
item_2
item_3
item_4
item_5
item_6
justify-content: flex-start
item_1
item_2
item_3
justify-content: flex-end
item_1
item_2
item_3
justify-content: center
item_1
item_2
item_3
justify-content: space-between
item_1
item_2
item_3
justify-content: space-around
item_1
item_2
item_3
align-items: flex-start
item_1
item_2
item_3
align-items: flex-end
item_1
item_2
item_3
align-items: center
item_1
item_2
item_3
align-items: baseline
item_1 这里都是文字内容
item_2 这里都是文字内容这里都是文字内容这里都是文字内容
item_3 这里都是文字内容这里都是文字内容这里都是文字内容这里都是文字内容这里都是文字内容这里都是文字内容
align-items: stretch
item_1
item_2
item_3
order
order-1
order-2
order-3
order-4
align-self：flex-start
容器align-items: center
item_1
align-self: flex-start
item_3
align-self：flex-end
容器align-items: center
item_1
align-self: flex-end
item_3
flex-grow
flex-grow:1
flex-grow:1
flex-grow:1
flex-grow
flex-grow:0
flex-grow:1
flex-grow:2
flex-grow
flex-grow:1
flex-grow:2
flex-grow:1
flex-shrink
item
item
flex-shrink: 0
item
item
flex-shrink
flex-shrink: 1
flex-shrink: 2
flex-shrink: 0
flex-shrink: 2
flex-shrink: 1
flex-basis
flex-basis:150px
flex-basis:50%
flex-basis:content
flex-basis:auto; 该元素width本身为25%