Вертикальная граница между развернутыми элементами флекс-бокса - PullRequest
Новая
       7

Вертикальная граница между развернутыми элементами флекс-бокса

1 голос
/ 31 января 2020

У меня есть несколько предметов, которые я бы хотел разместить во flex-box, чтобы они оборачивались на меньшие экраны. flex-wrap:wrap; может сделать это.

Когда они «развернуты» (то есть на широком экране), я бы хотел, чтобы между элементами контента была вертикальная линия. Когда экран / контейнер сужаются, я бы хотел, чтобы они переносились на следующую строку, а , а не имели рамку.

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

Примерно так:

enter image description here

Я видел Умные границы между элементами flex - тупой способ , но это не работает, когда контейнер flex-box «плавает» на странице, так как он опирается на скрытое поле -1px, чтобы скрыть лишнюю рамку, которая означает, что предметы должны простираться до левого поля, чтобы скрыть свои поля. Для центрированных прямоугольников это не всегда верно. 

/* Based on https://codepen.io/thatemil/pen/MrrJyZ 
 * used by
 * https://thatemil.com/blog/2018/01/08/direction-independent-borders-this-is-stupid/
 */
.container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: center;
}

.item {
  border-left: 1px solid red;
  margin-left: -1px;
  padding: 5px;
}
Short (unwrapped):

<div class="container">
  <div class="item" style="background-color:pink;">foobar</div>
  <div class="item" style="background-color:grey;">quux</div>
</div>

Long (wrapping):

<div class="container">
  <div class="item" style="background-color:pink;">foobar foobar foobar foobar foobar foobar</div>
  <div class="item" style="background-color:grey;">quux quux quux quux quux quux quux</div>
</div>

1 Ответ

1 голос
/ 01 февраля 2020

Чтобы добиться такого поведения с помощью ** flexbox *, вам потребуется медиазапрос или какой-либо другой триггер, чтобы удалить границу переноса. Поэтому, если вы не знаете, когда элементы будут обернуты, такое решение не поможет. Но вот демонстрация гибкого контейнера с использованием псевдоэлемента в качестве делителя.

jsFiddle demo 

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 5px;
}

.item:first-child {
  order: 1;
}

.item:last-child {
  order: 3;
}

.container::before {
  order: 2;
  content: "";
  border-right: 2px solid red;
}
<div class="container">
  <div class="item" style="background-color:pink;">foobar foobar foobar foobar foobar foobar</div>
  <div class="item" style="background-color:grey;">quux quux quux quux quux quux quux</div>
</div>

Другой возможный вариант - CSS Сетка . Используйте цвет фона контейнера, свойство grid-column-gap для разделителя и функцию auto-fit для переноса.

jsFiddle demo 

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background-color: red;
  grid-column-gap: 2px;
}

.item {
  padding: 5px;
}
<div class="container">
  <div class="item" style="background-color:pink;">foobar foobar foobar foobar foobar foobar</div>
  <div class="item" style="background-color:grey;">quux quux quux quux quux quux quux</div>
</div>

Дополнительная информация: { ссылка }

...