Я пытался создать простой адаптивный макет флексбокса, в котором столбцы переносятся так, чтобы они всегда располагались вертикально.
Это прекрасно работает:
.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 выровнен по левому краю. Я хочу сохранить вертикальное выравнивание красных блоков элементов, как есть, но центрировать весь вывод в окне.
Я ожидал, что display: block; margin: 0 auto; на внешнем div достигнет этого, но это не так. Есть идеи?!