CSS Flexbox align-CodePudding

I am currently learning HTML, CSS, how am I going to output this?

HTML Code

<body>
  <div >
    <div id=“one"> 1</div>
    <div id=“two"> 2</div>
    <div id="three">3</div>
    <div id=“four"> 4</div>
    <div id=“five"> 5</div>
  </div>
</body>

CSS Code

.container {
  width: 240px;
  height: 200px;
  border: 1px solid gray;
}
.container > div {
  width: 80px;
  height: 50px;
  border: 1px solid red;
}

I knew that I have to use flexbox to do that, but I have no idea how to change it, below is my modification of the CSS, but the result is wrong.

.container {
  width: 240px;
  height: 200px;
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  align-content: flex-start;
}
.container > div {
  width: 80px;
  height: 50px;
  border: 1px solid red;
}

CodePudding user response：

You need flex-wrap: wrap-reverse; align-content: flex-start;

.container {
  width: 240px;
  height: 200px;
  border: 1px solid gray;
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
}

.container>div {
  width: 80px;
  height: 50px;
  border: 1px solid red;
  box-sizing: border-box; /* don't forget this */
}

<div >
  <div id="one"> 1</div>
  <div id="two"> 2</div>
  <div id="three">3</div>
  <div id="four"> 4</div>
  <div id="five"> 5</div>
</div>