Flex is a Flexible Box acronym, translated into Chinese is "flexible box", used to provide maximum flexibility for boxed model. Any container can be specified as Flex layout.
A, flex core compatible browser written
{
the display: -webkit-Flex;
the display: -moz-Box;
the display: - Mz-of flexbox;
the display: Flex;
}
Second, six attributes on the container, the sub six attributes in the container
①, six properties on the container:
flex-direction: a direction decision sub spindle (default row)
flex-wrap: wrap decide whether subprojects (default is not wrap nowrap)
flex-flow: direction wrap consolidated wording
justify-content: determined sub (horizontal) lateral layout (default flex-start)
align-items: decision sub (vertical) longitudinal layout mode (default Stretch)
align-content: When sub multiple columns, the decision sub vertical layout (default flex-start)
②, sub-project of six properties in the container:
order: setting order of sub (default 0)
flex-grow: whether to expand the subprojects (the default is 0, not expand)
flex-shrink: Component whether reduced (the default is 1, can be reduced) (0 is to false, 1 is true)
flex-basis: the sub initial width setting (default auto)
flex: grow、shrink、basis合并
align-self: Component disposed longitudinal direction (vertical) position (default Stretch)
Third, the six properties on the container
①, flex-direction: a direction decision sub spindle (default row)
Source: front-end development blog
Reference: https://www.cnblogs.com/qingchunshiguang/p/8011103.html
http://caibaojian.com/flexbox-guide.html
https://blog.csdn.net/w390058785/article/details/83543198