Flexbox

flex-flow: <flex-direction> <flex-wrap>

CSS
.container {
  display: flex;
  flex-flow: row nowrap;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: flex;
  flex-flow: row wrap;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: flex;
  flex-flow: row wrap-reverse;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: flex;
  height: 400px;
  flex-flow: column nowrap;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: flex;
  height: 400px;
  flex-flow: column wrap;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: flex;
  height: 400px;
  flex-flow: column wrap-reverse;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9