图像 flexboxes 的 CSS : forcing columns and rows

Question

这无法将图像调整为行，只能调整为列。我不确定还要更改或添加什么。

img{
    display: flex;
    flex-direction: row;
    align-content:center;
    align-items: center;
    align-self: center;
    justify-content: center;
}

body{
    background-color:#ffffff;
    flex-direction: row;
}

.medium {
    width:40%;
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
    flex-basis: 300px;
    align-content:flex-start;
    margin: 20px auto;
}

<img alt="Kid's Activity" src="images/lemonade.jpg" class="medium"/>

Answer 1

希望这就是你要找的

body {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.medium {
  width: 30%;
  margin: 20px;
}

<img alt="Kid's Activity" src="http://placekitten.com/300/300" class="medium" />
<img alt="Kid's Activity" src="http://placekitten.com/300/300" class="medium" />
<img alt="Kid's Activity" src="http://placekitten.com/300/300" class="medium" />
<img alt="Kid's Activity" src="http://placekitten.com/300/300" class="medium" />