Flexbox包装线，你可以布局3x3网格，中心大小的内容

Question

使用flexbox我不确定我是否完全了解包装是如何工作的。假设我有以下html（没有假的.row元素，那么它们很容易）

.flex-container
   .spacer
   .spacer
   .content
   .spacer
   .spacer

是否可以创建一个全尺寸3x3网格，其间隔元素占据.content容器周围的所有空间（大小与内容相同并以水平/垂直方向居中）

Answer 1

我确定你现在已经解决了这个问题，但由于没有答案或更新......

正如您所指出的，问题在于部分包装。但是，通过将顶部和底部元素设置为flex-basis: 100%，可以非常轻松地解决包装 的问题。

另一个主要问题是任何给定的flex容器主要表示水平或垂直布局，而不是两者。 align-contents: stretch会使所有3行垂直填充空格，但我不确定它会完全你想要的是什么。

鉴于此标记：

<div class="flex-container">
  <div class="spacer">
    Automatically full width, take up all height between top of center block and container.
  </div>
  <div class="spacer">
    Take up all room available to left of center block.
  </div>
  <div class="content">
    Centered and sized to content.
  </div>
  <div class="spacer">
    Take up all room available to right of center block.
  </div>
  <div class="spacer">
    Automatically full width, take up all height below bottom of center block and container.
  </div>
</div>

这些针对flexbox的说明非常接近：

html, body, {
    margin: 0;
    padding: 0;
    height: 100%;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    height: 100%;
}

.spacer:first-child, 
.spacer:last-child {
    flex-basis: 100%;
}

.spacer:nth-child(2),
.spacer:nth-child(4) {
    flex: 1 1 auto;
}

.content {
    flex: 0 0 auto;
}

最明显的问题有几个：

• 顶部和底部行填充剩余空间的唯一原因是他们的stretch，但这将相对均匀地分配所有三行以占用任何剩余空间。意思是如果有很多，顶部，底部和中间都会得到一些额外的垂直伸展。

• 我们有三行的唯一原因是布局可以wrap，但因为如果内容太宽以至于左右间隔符的任何内容都无法覆盖，它就可以换行在它旁边，垫片和内容也将包裹。

并不是说你不能通过使用其他属性来解释这些问题，但我将此限制为可以使用flexbox专门做的事情。请在此处查看这些样式http://codepen.io/morewry/pen/WbqbgN/。如果您使用img.arbitrary-content的大小，则会看到大多数内容和大多数布局的限制。

下一个排列是使用两个flexbox，一列和一行。这更接近于我认为绘图背后的预期。

给定此标记（为中间插入一个行包装器）：

<div class="flex-column">
  <div class="outer-spacer">
    Automatically full width, take up all height between top of center block and container.
  </div>
  <div class="flex-row">
    <div class="inner-spacer">
        Take up all room available to left of center block.
    </div>
    <div class="content">
        Centered and sized to content.
    </div>
    <div class="inner-spacer">
        Take up all room available to right of center block.
    </div>
  </div>
  <div class="outer-spacer">
    Automatically full width, take up all height below bottom of center block and container.
  </div>
</div>

以下是flexbox的说明：

html, body, {
    margin: 0;
    padding: 0;
    height: 100%;
}

.flex-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.outer-spacer {
    flex: 1 1 auto;
}

.flex-row {
    display: flex;
    flex: 0 0 auto;
}

.inner-spacer {
    flex: 1 1 auto;
}

.content {
    flex: 0 0 auto;
}

在http://codepen.io/morewry/pen/wBLBNV查看这些样式。如果你玩img.arbitrary-content的大小，那么这个实际使用似乎更安全。