1, define the direction of the spindle box model, flex-direction
flex-direction: row; // set the spindle direction is the horizontal direction,
flex-direction: column; // set the spindle direction is the vertical direction,
2, the spindle element arrangement direction
flex-direction: row-reverse; // set the spindle direction is horizontal, elements are arranged in reverse order
flex-direction: column-reverse; // set perpendicular to the major axis direction, the elements are arranged in reverse order
3, the spindle direction wealthy space management, justify-content
justify-content: flex-start; // element in the starting position of the spindle, wealthy space at the end position of the spindle
justify-content: flex-end; // element in the spindle end position, starting position in the main shaft of wealthy space
justify-content: center; // element in the middle of the spindle, the spindle on both sides of the space to provide
justify-content: space-between; // richer evenly space between each two elements
justify-content: space-around; // richer evenly on both sides of each space element
4, the management-side axial direction rich space, align-items
align-items: flex-start; // start position side of the shaft element, a space rich side shaft end position
align-items: flex-end; // end position side of the shaft element, a space rich side shaft start position
align-items: center; // element side of the intermediate shaft, the shaft space to provide both side
align-items: baseline; // the baseline its axial direction upper side of the text