Create divs with row size as 3 and column to be of size N-CodePudding

I want to display divs so that it can be horizontally scrolled. I have created a display flex container but I am not sure what else do I need to do so that the boxes are aligned to the left.

CodePudding user response：

Is this what you wanted?:

.container {
  height: 95px;
  border: 1px solid black;
  display: flex;
  /* flex-direction: column; */
  overflow-x: auto;
}

.box {
  border: 1px solid black;
  margin: 5px;
  flex: 0 0 33%;
}

CodePudding user response：

The CSS align-content and justify-content properties allow you to choose where items in the flexbox appear. I suggest you look them up (for example on CSS tricks) to understand how they work. In this case setting align-content: flex-start; to the .container object will do the trick.