Wrapping things in css/flex-CodePudding

I have 4 items that need to be wrapped in css using flex. 3 items in a row and then a single item.

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

I cant (not allowed) use direction column.

no matter what I do this always ends up in one row where I need to scroll sideways.

CodePudding user response：

You can use width: calc(100% / 3); on the flex children, then specify flex-wrap: wrap; on your flex parent.

.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 >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CodePudding user response：

if you want to scroll sideways is {flex-wrap: wrap;}

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