动态宽度父级与flexbox列换行？

Question

父母只有display: flex和flex-wrap: wrap，而孩子有height的固定width和150px。行为如下：

父容器的高度垂直扩展以方便包装子元素。

但是，将父级更改为拥有flex-direction: column不会在水平方向上具有相同的行为：

代替父元素进行扩展以适合包装内容的是，是重新排列了子元素以方便在父元素中使用。

我想通过垂直包装内容实现的行为如下：

几乎像这样。想象一下，父级垂直填充该空间，然后水平扩展该包装内容。第一个gif的水平版本。

flex-box可以吗？

Answer 1

您正在寻找align-content: start（不推荐使用flex-start，因此grid和flexbox获得统一的语法）：

div {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: start;
}
span {
  width: 150px;
  height: 150px;
  border: 2px solid #f66;
  background-color: #eee;
  color: #f66;
  font: italic 2.1em sans-serif;
  padding: .21em;
}
body {
  background-color: #f95b68;
}
body { margin: 0;}
* {box-sizing: border-box}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
  <span>13</span>
  <span>14</span>
</div>