Flexbox 换行中的行，但 align-content: space-between 不起作用答案

【问题标题】：Row in Flexbox wrap, but align-content: space-between doesn't workFlexbox 换行中的行，但 align-content: space-between 不起作用
【发布时间】：2016-04-30 19:27:01
【问题描述】：

我对属性“align-content: space-between”有一些问题。使用“justify-content”，我在弹性项目中添加了“space-between”，现在我想在不同的包装行之间添加空间。

CSS

article > div {
    align-content: space-between;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#preview {
    background-color: black;
    width: 49.5%;
    text-align: center;
}

HTML

<article>
  <div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

     <div id="preview"> 

        <?php if (has_post_thumbnail()) { ?>
        <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
        <?php } ?> 

        <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>


     </div>


<?php endwhile; ?>
  </div>
<?php endif; ?>

</article>

【问题讨论】：

PHP 在这里没用...我们需要实际问题的 HTML/CSS 演示，很难说问题是什么
请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。

标签： css flexbox

【解决方案1】：

我不确定您的问题是什么，但请在此处尝试此代码 JSFiddle 并调整窗口大小以查看换行行为是否符合您的预期：

 <div class="parent">
   <div class="child">
   </div>
   <div class="child">
   </div>
   <div class="child">
   </div>
</div>

CSS

.parent{
  border: 3px solid orange;
  height: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-around;
  align-items: center;  
}

.child{
    width:100px;
    height:100px;
    background: blueviolet; 
}

【讨论】：