Я пытаюсь добавить кнопку действия в конец сетки элементов. Уловка в том, что элемент button не может влиять на центрирование элементов, но должен сломаться, как если бы он был частью сетки - просто смещение.
Я создал demo иллюстрирующий подход закрытия.
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.button {
margin-right: -120px;
width: 120px;
}
Здесь с использованием отрицательного поля на конечной кнопке элементы расположены по центру, однако кнопка переполняет контейнер и не переносится на новую строку правильно.
Кто-нибудь знает умный подход к этому макету? Это даже возможно с чистым CSS?
* {
box-sizing: border-box;
}
.flex-container {
padding: 0;
margin: auto;
list-style: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
max-width: 800px;
}
.flex-item {
border: 1px solid yellow;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.button {
margin-right: -120px;
width: 120px;
height: 150px;
font-size: 2em;
background: teal;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<span class="flex-item button">Button</span>
</ul>