如何使用 flex-direction: row 将项目按顺序排列在行中；

Question

how do arrange these boxes sequentially in a row? I tried to solve this problem using flex-direction: row ; but it creates another problem because each box have different hight

HTML

 #container { width: 35%; height: 80vh; border: 1px solid black; display: flex; flex-flow: column wrap; } #container > div { width: 5rem; border: 1px solid black; margin: 3px; display: inline-block; flex-grow: 1; }

 <div id="container"> <div style='height: 10rem'>1</div> <div style='height: 6rem'>2</div> <div style='height: 5rem'>3</div> <div style='height: 9rem'>4</div> <div style='height: 3rem'>5</div> <div style='height: 5rem'>6</div> <div style='height: 2rem'>7</div> <div style='height: 7rem'>8</div> <div style='height: 9rem'>9</div> <div style='height: 5rem'>10</div> <div style='height: 7rem'>11</div> <div style='height: 1rem'>12</div> <div style='height: 11rem'>13</div> <div style='height: 6rem'>14</div> <div style='height: 6rem'>15</div> </div>

Answer 1

 #container { border: 1px solid black; display: flex; align-items: center; height: 100%; width: 100%; } #container > div { width: 5rem; border: 1px solid black; margin: 3px; }

 <div id="container"> <div style='height: 10rem'>1</div> <div style='height: 6rem'>2</div> <div style='height: 5rem'>3</div> <div style='height: 9rem'>4</div> <div style='height: 3rem'>5</div> <div style='height: 5rem'>6</div> <div style='height: 2rem'>7</div> <div style='height: 7rem'>8</div> <div style='height: 9rem'>9</div> <div style='height: 5rem'>10</div> <div style='height: 7rem'>11</div> <div style='height: 1rem'>12</div> <div style='height: 11rem'>13</div> <div style='height: 6rem'>14</div> <div style='height: 6rem'>15</div> </div>

Answer 2

It works fine, if you set only display: flex; (default value of flex-direction is row) and width: 100%;

 #container { width: 100%; height: 80vh; border: 1px solid black; display: flex; } #container > div { width: 5rem; border: 1px solid black; margin: 3px; display: inline-block; flex-grow: 1; }

 <div id="container"> <div style='height: 10rem'>1</div> <div style='height: 6rem'>2</div> <div style='height: 5rem'>3</div> <div style='height: 9rem'>4</div> <div style='height: 3rem'>5</div> <div style='height: 5rem'>6</div> <div style='height: 2rem'>7</div> <div style='height: 7rem'>8</div> <div style='height: 9rem'>9</div> <div style='height: 5rem'>10</div> <div style='height: 7rem'>11</div> <div style='height: 1rem'>12</div> <div style='height: 11rem'>13</div> <div style='height: 6rem'>14</div> <div style='height: 6rem'>15</div> </div>

Answer 3

You wrote "disolay" instead "display" in containers > div.

Where did you used flex row? In div or container?