在 css/flex 中包装东西

Question

我有 4 件物品需要使用 flex 包裹在 css 中。连续 3 个项目，然后是单个项目。

.movies {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:flex-start;
    flex: 1 0 33%;
}

我不能（不允许）使用方向栏。

无论我做什么，这总是在我需要横向滚动的一行中结束。

Answer 1

您可以在 flex children 上使用 width: calc(100% / 3);，然后在 flex parent 上指定 flex-wrap: wrap;。

.movies {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items:flex-start;
    flex: 1 0 33%;
}

.movies > div {
  width: calc(100%/3);
}

<div class="movies">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Answer 2

如果你想横向滚动是{flex-wrap: wrap;}

.movies {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:flex-start;
  flex: 1 0 33%;
  flex-wrap: wrap;
}

在 css/flex 中包装东西

Wrapping things in css/flex

html

css

flexbox