为什么我的 Flexbox 项目没有彼此相邻包装？

Question

我有一个带有以下 SCSS 的 Flexbox 容器：

.picker {

  height: 75px;

  width: 100%;

  display: flex;

  flex-flow: column wrap;

}

我的弹性项目具有以下 SCSS：

.pickeritem {

  height: 25px;

  width: 130px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  margin: 0 10px;

}

我遇到的问题是容器将项目包装到 div 的中心，而不是紧挨着其他项目，如下所示：

如何使项目 3 到 8 彼此相邻换行，将所有空白保留在 div 右侧？

这可以在不使用任何行和列方法的情况下实现吗？

Answer 1

尝试使用align-content属性。我还做了一些其他细微的更改，并添加了颜色和边框以获得更好的可视化效果。.picker {&nbsp; height: 75px;&nbsp; width: 300px;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; flex-wrap: wrap;&nbsp; align-content: flex-start;&nbsp; border: 1px solid black;}.pickeritem {&nbsp; height: 25px;&nbsp; width: 50px;&nbsp; flex-shrink: 0;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; margin: 0 10px;&nbsp; background-color: #fbbdbd;}<div class='picker'>&nbsp; <div class='pickeritem'>1</div>&nbsp; <div class='pickeritem'>2</div>&nbsp; <div class='pickeritem'>3</div>&nbsp; <div class='pickeritem'>4</div>&nbsp; <div class='pickeritem'>5</div>&nbsp; <div class='pickeritem'>6</div>&nbsp; <div class='pickeritem'>7</div>&nbsp; <div class='pickeritem'>8</div>&nbsp; <div class='pickeritem'>9</div><div>

Answer 2

您可以使用.picker {&nbsp; height: 75px;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; justify-content:flex-start;}.pickeritem {&nbsp; height: 25px;&nbsp; flex-shrink: 0;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; margin: 0 10px;}