Question

我有一个简单的盒子网格，我想与Flexbox一起响应。

框的数量是由用户生成的，所以我需要一些动态工作的东西。 Here's a codepen snippet我所在的地方：

<style>

body {
    height: 100%;
    width: 100%;
}

.bodycontainer{
    max-width: 600px;
    padding: 15px 5px 15px 5px;
    display:block;
    line-height: 140%;
    color: #34282C;
}

</style>

<body>
    <table width="100%" style="table-layout: fixed; margin: 0 auto;">
        <tr>
            <td align="center">
                <table align="center" border="0" cellpadding="0" cellspacing="0" 
                style="padding: 5px 0; font-family: Helvetica, Arial, sans-serif; 
                font-size: 11px; color: #2e5a67; width: auto !important; 
                table-layout: fixed; margin: 0 auto;">
                    <tr>
                        <!-- This content will center -->
                        <td align="center"><a target="_blank" href="" 
                        style="font-family: Helvetica, Arial, sans-serif; 
                        font-size: 10px; color: #999; text-decoration: none;">
                        This content will center</a>
                        </td>
                    </tr>
                </table>
                <table class="bodyContainer" cellspacing="0" border="0" 
                align="center" width="600" style="max-width: 600px; table-layout: 
                fixed; margin: 0 auto;">
                    <tr>
                        <!-- This content WILL NOT center -->
                        <td align="center" style="padding:15px 0px 15px;"><a href="">
                        <img width="125" src="" 
                        alt="This image will NOT center" border="0"></a></td>
                    </tr>
                </table>
                <table class="bodyContainer" cellspacing="0" border="0" 
                align="center" width="600" style="padding-top: 15px;
                max-width: 600px; table-layout: fixed; margin: 0 auto;">
                    <tr>
                        <!-- This content will center -->
                        <td class="" align="center" style="padding:10px 0 20px;">
                        <a href="" 
                        target="_blank"><img src="" 
                        alt="This image will center" width="80" 
                        border="0"></a></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

CSS：

<div class="wrap">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

以上代码的内容如下：

这就是我喜欢的样子：

如何使用flexbox实现这一目标？我想避免％边距，并让flexbox在这里完成所有工作，因为它在响应式设置中非常好用。

Answer 1

嗯，你可以做到这一点，但代价是破坏DOM的一点点。插入填充元素（与一行中最大数量的元素一样多），高度为0，你就可以了吗

.wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.thumb{
  width:150px;
  height:150px;
  background-color:black;
  margin-bottom:20px;
}


.filler{
  width:150px;
  height:0px;
  margin: 0px;
}

<div class="wrap">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
</div>

使用CSS Flexbox的`justify-content：space-between`但左对齐最后一行

1 个答案: