Browser compatibility

CSS3 new properties, plus browser prefix compatible with earlier browsers

-moz- 			-o- / Opera (early) / -ms- / IE */As follows: {-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
    /* Unprefixed to the last */
	animation-name: fadeIn;  
}
Copy the code

Flexible layout compatibility

Define the layout as an elastic layout
{
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex;
}
Copy the code
The spindle turning
{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}
Copy the code
The children take up the rest of the space
{
	-webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
Copy the code
Vertical center
{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
Copy the code
Horizontal center
{
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}
Copy the code
full-justified
{
	-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
Copy the code