Question

我在属性“align-content：space-between”中遇到了一些问题。使用“justify-content”，我在flex-items之间添加“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>

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

Flexbox包装中的行，但是align-content：space-between不起作用

1 个答案: