Flexbox内の行は折り返しますが、align-content：space-betweenは機能しません。

Question

"align-content：space-between"プロパティに問題があります。 "justify-content"を使用すると、フレックスアイテムの間に「スペース間」が追加され、異なるラップされた行の間にスペースを追加します。私はあなたの問題はなく、ここにJSFiddleをこのコードを試してみて、ラップの振る舞いは、あなたが期待するものであるかどうかを確認するためにウィンドウのサイズを変更しているかのかどうか分からない

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> 

Answer 1

：

<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; 
}