css flex相关,长期更新

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css flex相关,长期更新相关的知识,希望对你有一定的参考价值。

这里暂时不是入门教学,是flex知识收集

兼容性
display: flex;
display: -webkit-flex;

其余新属性前面加-webkit-
  

Flex属性(the first value is the default one of the property)
  direction:ltr/rtl //the flex line

  flex-direction:flex-start/flex-end/center/space-between/space-around //the main axis

  align-items:flex-start/flex-end/center/baseline/stretch //the cross axis

  flex-wrap:nowrap/wrap/wrap-reverse

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

  flex-flow: [flex-direction] [flex-wrap]

Flex Item属性
  order:0

  margin:auto

  align-self:stretch/flex-start/flex-end/center/baseline //overrides Flex Container‘s align-items

  flex: 0 1 auto/[Number]/initial/auto/none //不要用,除非把flex-basis部分设置auto,否则在ie里,box-sizing强制变content box
  flex: [flex-grow] [flex-shrink] [flex-basis]

  flex-basis:auto/[width]

  flex-grow:0

  flex-shrink:1

以上是关于css flex相关,长期更新的主要内容,如果未能解决你的问题,请参考以下文章

[ css 弹性盒子模型 box-flex 及相关属性 ] box-flex属性弹性盒子模型讲解及实例演示

相关博客链接(长期更新)

24. CSS3 弹性盒子 Flex布局

flex 相关属性

关于SQL的相关笔记长期更新,只发一帖

记录一下遇到的单词(长期更新)