Добавить гибкий элемент, не затрагивая центрированных братьев и сестер - PullRequest
1 голос
/ 07 ноября 2019

Я пытаюсь добавить кнопку действия в конец сетки элементов. Уловка в том, что элемент 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>

1 Ответ

2 голосов
/ 07 ноября 2019

Я не верю, что это возможно с чистым CSS.

  1. Центрирование происходит посредством распределения свободного пространства в контейнере. Элемент кнопки, добавленный к последнему элементу, будет занимать место. Следовательно, это повлияет на центрирование его братьев и сестер.

  2. Если вы решите использовать абсолютное позиционирование для удаления кнопки из потока документов, он больше не будет занимать пространство в контейнере, ине повлияет на центрирование других гибких элементов. Тем не менее, он также прекратит упаковку, потому что потеряет связь со своими братьями и сестрами.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...