具有 Flexbox 列换行的动态宽度父级？

Question

父级只有display: flex和flex-wrap: wrap，而子级有固定的height和。其行为如下：width150px

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

但是，将父级更改为 hasflex-direction: column不会在水平方向上产生相同的行为：

父元素不是扩展以适应包装内容，而是重新排列子元素以方便在父元素中使用。

我希望通过垂直环绕内容实现的行为如下所示：

嗯，差不多就是这样。想象一下父级垂直填充空间，并水平扩展以包裹内容。第一个 gif 的水平版本。

这可以通过弹性盒实现吗？

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>