Elastic concept layout name:
1, the container: parent element to add elastic layout; item: layout of each sub container an elastic element, called a project.
2, the spindle: in the elastic layout, we attribute the spindle by a predetermined horizontal / vertical directions (flex-direction); in another direction perpendicular to the main shaft, known as cross-axis.
Elastic layout of several important basic attributes:
1, flex-direction property determines the direction of the spindle (i.e., the arrangement direction of the project).
row (default value): The spindle is horizontal, the starting point at the left end;
row-reverse: the spindle in the horizontal direction, starting at the right end;
column: main vertical direction, the starting point on the edge.
column-reverse: the spindle in the vertical direction, along the lower starting point.
2, flex-wrap attribute defines (define whether the line feed)
nowrap (default): Do not wrap. When the container is not wide enough, the width of each item will be squeezed;
wrap: wrapping, and the top of the vessel a first line;
wrap-reverse: wrapping, and the bottom of the first container row.
Note: (flex-flow is an abbreviated form flex-direction and flex-wrap, and the default value: flex-flow: row wrap;)
3, justify-content attribute defines the alignment of the items on the spindle.
flex-start (default): The project is located in the spindle starting point.
flex-end: Project is located in the spindle end.
row- starting point on the left, row-reverse- starting point on the right, column- starting point at the top, column-reverse- starting point in the bottom;
center: center
space-between: justification, the spacing between the items are equal. (Beginning and final project, and no parent container edge interval)
space-around: at equal intervals on both sides of each item. But the gap between the project twice the size of the project and the interval of the border. (First and last project, with the edge of the parent container there is a certain interval)
space-evenly: at equal intervals on both sides of each item. Therefore, the spacing between the project and the project with the same frame interval.
4, align-items item attribute defines how to align the cross shaft;
flex-start: the starting point of cross-axis alignment.
flex-end: end cross-axis alignment.
center: the midpoint of cross-axis alignment.
baseline: first line of text of the project baseline alignment. (High lines of text, the font size will affect the baseline of each line)
stretch (default): If the project height is not set or set to auto, occupies the entire height of the container.
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频）5, align-content attribute defines a plurality of axes alignment. If the project is only one axis, the property does not work.
(When item replaced multiple rows, using the align-content can be substituted align-items)