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

Answer 2

您可以尝试

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 3

尝试此代码！希望这对您有用。

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>

图像Flexbox的CSS：强制列和行

3 个答案: