Compatible with: IE does not consider Android as well as low-end machine (4.3)
Container properties:
flex-flow、flex-direction、flex-warp
justify-content、align-items、align-content
Element attributes:
order、flex-grow、flex-shrink
flex-basis、flex、align-self
A, flex elastically box model display: fiex (parent)
1, the elastic elements are arranged along the major axis is always
2, a resilient element may be a container may also be an elastic element
Second, the main flex-direction (parent)
1, set the spindle in the direction
* Row: Left -> Right
* Column: On the ->
* Row-reverse: Right -> Left
* Column-reverse: under -> on
2, along the main axis aligning treatment flex-wrap (parent)
* Nowrap: do not split the line, stretch the elastic element
* Wrap: wrap
* Wrap-reverse: Reverse wrap
3, the composite properties: flex-flow = flex-direction + flex-warp
Third, the resilient and elastic elements to deal with child
1, flex-warp: When nowrap, the width of the container with a surplus / shortage, the elastic element can be used the following properties:
* Flex-shrink, shrink consider a case where the size of the individual elements themselves, fill the screen
* When there is the remaining width, flex-shrink invalid
* Flex-grow, the number of copies according to the respective element declaration calculated distribution, superimposed on the original size
* No excess width, flex-grow invalid
2, set the element size width, height, as well as flex-basis, and when and width / height also set, flex-basis higher priority, the default value is auto, if this time width / height, places provided for accurate, otherwise the size of the container distraction height / width based on the content display related to the size of the spindle, i.e.,
flex-direction: column; when, flex-basis is the height of the element, and vice versa
3, the composite properties: flex = flex-grow + flex-shrink + flex-basis
Fourth, how the container aligned
1, the alignment of the spindle justify-content (parent)
2, the alignment of the cross shaft
* Single-line alignment ailgn-items
* Multi-line alignment align-content
align-content align-items and the like, but only the wrap opening in the container into effect, more than two values on the attribute values
Six other order: more elegant adjusting element order, the smaller the value the more forward, the default is 0
Seven summary
Eight, compatibility wording
.flex{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}