CSS FlexBox Model: Difference between flex and box
Using the css flex box model there are many different properties.
What is the difference between the following properties?
-webkit-flex: 1;
-moz-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
and
-webkit-flex: 1;
-moz-box-flex: 1;
flex: 1;
How do I combine the old and the new syntax?
box-flex is the old flexbox specification: you were allowed to specify one single "flexibility" value instead of the "growing", "shrinking" and "basis" factors values as you can do now
NEW OLD
flex:1 1 auto; == box-flex:1;
flex:1 0 auto; == no equivalent
flex box may look really confusing because there are many specifications involved
functioning is different between each spec, so it's better to define fallbacks in a later moment; especially if you use -grow -shrink -basis and -wrap etc, you will need to fallback to a totally different layout
if you are learning, I suggest to use only the new [nearly]standard syntax http://dundalek.com/css3-flexbox-reference/
and in a second time add support for older browser ( not necessarily all )
only MSIE10's and the old -webkit- syntaxes (to target old Android phones); the -moz- syntax isn't necessary, IMHO
yes, you need the old syntax to support android 2. avoid to use flex-wrap because old browser don't support them (actually even new firefox doesn't support it yet), try to always use flex:1 1 auto; because other values aren't possible with old syntax... space-between and other new flexbox "goodies" don't work in the oldest flexbox spec (but may work in the 2011 spec) so avoid them if possible. basically the safe properties/values are
flex: with the value 1 1 auto
flex-direction: (box-orient)
justify-content: flex-start | flex-end | center justify-content: flex-start | flex-end | center (box-pack)
align-items: flex-start | flex-end | center | baseline | stretch align-items: flex-start | flex-end | center | baseline | stretch (box-align)
上一篇: 目的：使内联。 应该显示为内联