Share a FlexBox standard and compatible writing cheat sheet-CSS Tutorial-php.cn

FlexBox standard writing:

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

Overview:

In total, there are 12attributes;

There are 6 or 5 single attributes about the container, which respectively define thedirection, 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 theorder, expansion, contraction, initial size, alignment,# of the elements. ## and a shorthand attribute descriptionElement size

<0 1 auto>

##Description ##flex- # #flex-wrap : ##flex-flow just if y-content align-items : ##flex-basis :

##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

Distribution of extra white space within the container

##Container items :

order: 0

The arrangement order of elements in the container

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!