带有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>