FlexBox standard and compatible writing quick query table, flexbox quick query

FlexBox standard and compatible writing quick query table, flexbox quick query

FlexBox standard writing:

Supports browsers: IE11, Chrome29 +, FireFox 20 +, and Safari prefix-webkit-Overview: In general, there are 12 attributes. About the container, there are 6 and 5 single attributes, defines the direction, row, horizontal, vertical, blank, and five single attributes of elements in the container, define the order of elements, stretching, shrinking, initial size, alignment, and a shorthand attribute to describe the element size.

Container: display: flex | inline-flex;	Description
Flex-direction: Row | column | row-reverse | column-reverse	Arrangement of elements in the container
Flex-wrap: Nowrap | wrap-reverse	Displays one or more rows of an element.
Flex-flow:<Flex-direction> <flex-wrap>Default: <row nowrap>	Abbreviations of the preceding two attributes
Justify-content: Flex-start | flex-end | center | space-between | space-around	Horizontal distribution of elements in the container
Align-items: Stretch | flex-start | flex-end | center | baseline	Vertical Distribution of elements in the container
Align-content: Stretch | flex-start | flex-end | center | space-between | space-around	Distribution of additional blank parts in the container
Container items:
Order:<Number> 0	Arrangement of elements in the container
Align-self: Auto | flex-start | flex-end | center | baseline | stretch	Overwrite the value of align-items to define its own distribution in the vertical direction.
Flex-grow:<Number> 0	Stretch of the space occupied by elements in the container
Flex-shrink:<Number> 1	Shrinkage of the space occupied by elements in the container
Flex-basis:<Width> auto	Size of elements in the container during initialization
Flex:<Flex-grow> <flex-shrink> <flex-basis> <0 1 auto>	Abbreviations of the preceding three attributes

  * The preceding <number> values cannot be negative; * The first value of each attribute is the default value; * Blue refers to the shorthand mode for multiple attributes;  Compatible with IE10: prefix-ms-

Display:-ms-flexbox |-ms-inline-flexbox;	Standard (orange indicates the item attribute)
-Ms-flex-direction: Row | column | row-reverse | column-reverse	Flex-direction
-Ms-flex-wrap:None | wrap-reverse	Flex-wrap
Not Supported	Flex-flow
-Ms-flex-pack:Start | end | center | justify	Justify-content
-Ms-flex-align:Stretch | start | end | center | baseline	Align-items
-Ms-flex-line-pack:Start | end | center | baseline	Align-content
-Ms-flex-order:  <Number>	Order
-Ms-flex-item-align:Stretch | start | end | center | baseline	Align-self
-Ms-flex :<Positive-flex> <negative-flex> <preferred-size> | none	Flex: 0 0 auto

* It is not recommended before IE10. You can try display: table;For Chrome, FireFox supports earlier versions: FireFox: replace-webkit-with-moz -.

Container: display:-webkit-flexbox |-webkit-inline-flexbox;	Standard (orange indicates the item attribute)
-Webkit-box-direction: Normal | reverse-Webkit-box-orient: Horizontal | vertical	Flex-direction
Not Supported	Flex-wrap
Not Supported	Flex-flow
-Webkit-box-pack: Flex-start | flex-end | center | space-between | space-around	Justify-content
Not Supported	Align-content
-Webkit-box-align: Stretch | flex-start | flex-end | center | baseline	Align-items
-Webkit-box-ordinal-group:<Number>	Order
-Webkit-box-flex:<Number> 1	Flex-grow
-Webkit-flex-shrink:<Number> 0	Flex-shrink
-Webkit-flex-basis:<Width> auto (None-moz -)	Flex-basis
-Webkit-box:<Flex-grow> <flex-shrink> <flex-basis> <1 0 auto>	Flex
Not Supported	Align-self

Reference: compatible with multi-browser predefine Syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox