Share a FlexBox standard and compatible writing cheat sheet

FlexBox standard writing:

Supported browsers: IE11, Chrome29+, FireFox 20+, Safari plus prefix -webkit-

Overview:

In total, there are 12 attributes;

There are 6 or 5 single attributes about the container, which respectively define the direction, row, horizontal arrangement, vertical arrangement, blank distribution, and an abbreviation attribute of the element arrangement, Direction, row

There are 6, 5 single attributes about the elements in the container, which respectively define the order, expansion, contraction, initial size, alignment,# of the elements. ## and a shorthand attribute description Element size

##Description##flex-# #flex-wrap:##flex-flowjustify-contentalign-items:##flex-basis: <0 1 auto>

##container:

display: flex | inline-flex;

direction

: row | column | row-reverse | column-reverse

The arrangement direction of elements in the container

nowrap | wrap | wrap-reverseElements are displayed in one or more lines

:

default: Abbreviation of the above two properties

:

flex-start | flex-end | center | space-between | space-aroundThe distribution of elements in the container in the horizontal direction

stretch | flex-start | flex-end | center | baseline

In the vertical direction, The distribution of elements within the container

align-content: stretch | flex-start | flex-end | center | space-between | space-around

Distribution of extra white space within the container

##Container items :

order: 0

The arrangement order of elements in the container

align-self: auto | flex-start | flex-end | center | baseline | stretch

Override the value of align-items and define its own distribution in the vertical direction

##flex -grow: 0

The expansion of the space occupied by the element in the container

##flex-shrink

: 1

##The shrinkage of the space occupied by the element in the container

auto

When initialized, the size of the element in the container

#flex:

Abbreviations for the above three attributes

* The above does not support negative values;

*The first value of each attribute is the default value;

*Blue is multiple attribute abbreviation mode;

Compatible with IE10: Add prefix -ms-

justify-content##-ms-flex-align -ms-flex-line-pack

display:-ms-flexbox | -ms-inline-flexbox;	standard (Orange is the item attribute)
##-ms-flex-direction : row | column | row-reverse | column-reverse	flex-direction
##-ms-flex-wrap : none | wrap | wrap-reverse	flex-wrap
not support	flex-flow
##-ms-flex-pack : start | end |center | justify
: stretch | start | end |center | baseline align-item	s
: start | end |center | baseline	align-content
-ms-flex-order :	order
-ms-flex-item-align :  stretch | start | end |center | baseline	align-self
-ms-flex :     || none	flex : 0 0 auto

*It is not recommended to use it before IE10. You can try display:table;

About Chrome , FireFox old version supports:

FireFox: Replace -webkit- with -moz- to

## does not support align-content##-webkit-box-align##-webkit-box-ordinal-group:##-webkit-box-flex:

container : display: -webkit-flexbox | -webkit-inline-flexbox;	standard (Orange is 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
: stretch | flex-start | flex- end | center | baseline##align-items
##order
1	flex-grow
-webkit-flex-shrink:  0	flex-shrink
-webkit-flex-basis:  auto   (无-moz-)	flex-basis
-webkit-box:    <1  0  auto>	flex
不支持	align-self

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The above is the detailed content of Share a FlexBox standard and compatible writing cheat sheet. For more information, please follow other related articles on the PHP Chinese website!