Question

我一直在尝试制作一个简单的自适应flexbox布局，其中的列会自动换行，以使它们始终垂直排列。

那很好：

  .outer {
                margin: auto auto; /* Not centering contents of .inner div */
            }
            .inner {
                display: flex;
                flex-wrap:wrap;

            }

            .inner .item {
                
                width: 205px; 
                height: 180px; 
                background: red; 
                margin: 10px; 
            }
            
            .item {
                
            }

<div class="outer">
    <div class="inner">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="item">21</div>
        <div class="item">22</div>
        <div class="item">23</div>
        <div class="item">24</div>
        <div class="item">25</div>
        <div class="item">26</div>
        <div class="item">27</div>
        <div class="item">28</div>
        <div class="item">29</div>
        <div class="item">30</div>
    </div>
</div>

...，除了整个外部div都向左对齐。我想保持红色项目块的垂直对齐，但要使整个输出在窗口中居中。

我期望外部div上的display: block; margin: 0 auto;实现这一目标，但事实并非如此。有什么想法吗？！

Answer 1

您的内部div是全角，因此maring auto在这里无法使用。您还可以在内部div上添加一个justify-content。

  .outer {
            }
            .inner {
                display: flex;
                flex-wrap:wrap;
              justify-content: center;
            }

            .inner .item {
                
                width: 205px; 
                height: 180px; 
                background: red; 
                margin: 10px; 
            }
            
            .item {
                
            }

<div class="outer">
    <div class="inner">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="item">21</div>
        <div class="item">22</div>
        <div class="item">23</div>
        <div class="item">24</div>
        <div class="item">25</div>
        <div class="item">26</div>
        <div class="item">27</div>
        <div class="item">28</div>
        <div class="item">29</div>
        <div class="item">30</div>
    </div>
</div>

这会将所有元素直接定位在内部div居中

如何将响应式flexbox div居中放置在外部div中

1 个答案: