Flexbox在IE10中的用法

Flex弹性布局确实是CSS3中很强大的一个属性集,但想用好它也不是那么容易。当我们在关注它的优点的同时也应该留意flex属性的缺陷。就我个人的理解,我觉得flex布局有以下两大缺点(特点)需要特别关注:
  • (1)设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
  • (2)对于不同浏览器的的支持需要些很多的前缀,甚至属性名称有可能完全不同。
本文将记录我在工作中积累的关于flexbox在IE10中的用法。
display display:flex |inline-flex;
display:-ms-flexbox | -ms-inline-flexbox; /*IE10*/
flex-direction flex-direction: row | row-reverse | column |column-reverse;
-ms-flex-direction :row | row-reverse | column |column-reverse; /*IE10*/
flex-wrap flex-wrap: nowrap | wrap | wrap-reverse;
-ms-flex-wrap: nowrap | wrap | wrap-reverse; /*IE10*/
flex-flow flex-flow: <'flex-direction'> || <'flex-wrap'> ;
-ms-flex-flow: <'flex-direction'> || <'flex-wrap'>; /*IE10*/
justify-content justify-content: flex-start | flex-end | center | space-between | space-around ;
-ms-flex-pack: start | end | center | justify; /*IE10*/
align-items align-items: flex-start | flex-end | center | baseline | stretch;
-ms-flex-align: start | end | center | justify; /*IE10*/
align-content align-content: flex-start | flex-end | center | space-between | space-around | stretch;
-ms-flex-line-pack: start | end | center | justify; /*IE10*/
order order: <integer>;
-ms-flex-order: <integer>;/*IE10*/
flex-grow flex-grow: <number>;
-ms-flex-positive: <number>;/*IE10*/
flex-shrink flex-shrink: <number>;
-ms-flex-negative: <number>;/*IE10*/
flex-basis flex-basis: <length> | auto;
-ms-flex-preferred-size: <length> | auto;/*IE10*/
flex flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
-ms-flex: <positive-flex> <negative-flex> <preferred-size> /*IE10*/
IE 10 uses the following format for flex property -ms-flex: <positive-flex> <negative-flex> <preferred-size> And single props for each argument: -ms-flex-positive, -ms-flex-negative and -ms-flex-preferred-size (there is no flex-grow, flex-shrink and flex-basis in IE 10)
align-self align-self: auto | flex-start | flex-end | center | baseline | stretch;
-ms-flex-item-align: start | end | center | stretch | basline; /*IE10*/
参考链接:
1. http://realworldvalidator.com/css/properties
2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox
  1. 寻寻觅觅 -- Christine Welch
  2. Just the Way You Are -- Bruno Mars
  3. Despacito(Remix) -- Luis Fonsi;Daddy Yankee;Justin Bieber
  4. 没有什么不同 -- 曲婉婷
  5. 故乡--许巍
  6. Jar Of Love -- 曲婉婷
  7. I Really Like You -- Carly Rae Jepsen