如何在CSS3&x27的最新实现中编写此样式；s柔性箱

我在2009年flexbox的实现中找到了实现风格的方法，但是还有两个实现。短暂的2011年和2012年的部分语法，然后是当前语法和最终语法

如何在当前和最终实现中编写此代码

如果你也能在2011年实现，那就太好了

我正在寻找与供应商前缀

显示：-moz框；
显示：-网络工具包盒；
显示：框；
-moz框对齐：居中；
-webkit框对齐：居中；
框对齐：居中；
-moz盒方向：水平；
-webkit盒方向：水平；
盒子方向：水平；
-莫兹盒包装：中心；
-webkit盒包：中心；
盒式包装：中间；

完整的属性集如下所示：

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;

  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

请注意，

行

/

水平

是默认方向，除非您要从前面的

列

/

垂直

声明中覆盖它，否则无需添加它

将flex容器设置为inline与其他inline属性（例如inline块、inline表等）遵循相同的命名约定：

如果你是专门为垂直居中而这样做的，那么Firefox在2009年的实现中有时会出现问题，因为它并不总是正确包装。我的建议是，与现代房地产相比，2009年的房地产使用不同的房地产，如：

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;

  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

---

如果要查找每个草稿中所有属性名称/值的图表，请在此处找到：。下一个Compass（用于Sass）版本将推出一套新的Flexbox混音器，为您完成所有工作。@cimmanon谢谢。这个链接应该会有所帮助。我不使用Sass，但谢谢。我知道我不使用内联flex。但是，您能否在回答中添加第二组样式，以实现与内联flex的完整属性集相同的效果？在我使用内联flex的情况下，我可以在将来参考这一点。我试图达到的效果是水平和垂直居中。我试过了，顶部栏内的段落仍然是顶部对齐的，而不是水平和垂直居中的。奇怪的是，当我尝试2009年的版本时，就像在我的问题中一样，它是集中的。这是页面：你知道为什么顶部的p不居中吗？是的，2009年的草案与现代草案在行为上有细微的不同。您忽略的是

align items

属性，该属性默认为

stretch

（如在stretch中，沿横轴或垂直方向填充可用空间），在2009年草稿中不存在。我的答案末尾的代码是为所有草稿编写单个或匿名flex项的垂直对齐最有效的方法。代码演示：另外，

rgb（R，G，B）

color格式不需要十六进制回退，它已经存在很久了。只有

rgba（R，G，B，A）

需要后备。非常感谢您的帮助！你能为我再做一件事吗，在你的答案中加上如何水平和垂直居中一个内联弹性元件？如果可以，将其与上面的flex box版本分开，但答案相同？

li {
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  /* vertical centering for legacy, horizontal centering for modern */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* modern Flexbox only */
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* legacy Flexbox only */
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
}