postcss plugin easily write flex
flex-
box1
box2
TIP
- Pull the upper right and lower corner, you can change the size of the box body
- Depending on the number of internal elements, the effect may vary, increasing or decreasing the number of views
Explain
display: flex-[flex-flow][justify-content][align-items][align-content]
Use _ to denote null values, and last _ values can be omitted (display: flex-wb_s)
flex-flow
x: row nowrapy: column nowrapw: row wrapm: column wrap
justify-content
s: flex-starta: space-aroundb: space-betweenc: centere: flex-end
align-items
s: flex-startb: baselinec: centere: flex-endh: stretch
align-content
s: flex-starta: space-aroundb: space-betweenc: centere: flex-end