CSS для флексбоксов изображений: форсирование столбцов и строк

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:40%;
    flex-basis: 300px;
    align-content:flex-start;
    margin: 20px auto;
}

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

Answer 2

Попробуйте этот код!Надеюсь, это сработает для вас.

body{
  margin: 0;
  padding: 0;
}
.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.medium {
    flex-direction: column;
    display: block;
    height: 300px;
    width: 450px;
    margin-right: 15px;
}
.medium:last-child {
  margin-right: 0;
}

<div class="wrapper">
  <img alt="Kid's Activity" src="https://image.ibb.co/k303BL/111.jpg" class="medium"/>
  <img alt="Kid's Activity" src="https://image.ibb.co/k303BL/111.jpg" class="medium"/>
  <img alt="Kid's Activity" src="https://image.ibb.co/k303BL/111.jpg" class="medium"/>
    <img alt="Kid's Activity" src="https://image.ibb.co/k303BL/111.jpg" class="medium"/>
</div>

Answer 3

Надеясь, это то, что вы ищете

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" />