如何在 CSS3 的 Flexbox 的最新实现中编写此样式

Question

我想出了如何使用 2009 年的 flexbox 实现来实现样式，但还有另外两个实现。短暂的 2011 年和 2012 年的部分语法，然后是当前和最终的语法。

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

如果你也能做 2011 年的实施，那就太好了！

我正在寻找供应商前缀。

display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-align:center;
-webkit-box-align:center;
box-align:center;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
-moz-box-pack:center;
-webkit-box-pack:center;
box-pack:center;

Answer 1

完整的属性集如下所示：

.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;
}

请注意，row/horizontal 是默认方向，除非您从之前的 column/vertical 声明中覆盖它，否则无需添加它。

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

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

如果您专门为垂直居中执行此操作，则 2009 年实施的 Firefox 有时可能会出现问题，因为它并不总是正确换行。我的建议是对 2009 年的房产使用与现代房产不同的房产，如下所示：

http://codepen.io/cimmanon/pen/mxuFa

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;
}