Как сохранить обернутые гибкие элементы той же ширины, что и элементы предыдущей строки?

У меня есть <ul>, который является гибкой коробкой и связкой <li> в ней, которые являются элементами flex.

Я пытаюсь получить <li> гибкую ширину, которая остается между двумя размерами, используя min-width и max-width. Он отлично работает, пока они находятся на одной линии. Однако, когда они обертываются, <li> на новой строке использует как можно больше места. Это означает, что они маленькие на первой строке и большие на второй строке, когда их всего лишь несколько.

Есть ли способ сообщить flexbox, чтобы элементы сохранялись после упаковки, сохраняя гибкую ширину?

демонстрационная версия:

enter image description here

Мой код выглядит следующим образом:

<ul>
  <li>
    <figure>
      <img src="http://placekitten.com/g/250/250">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/100/100">
    </figure>
  </li>
  <!-- ... -->
</ul>

И CSS:

ul
  display: flex
  flex-wrap: wrap

  li
    min-width: 40px
    max-width: 100px
    flex: 1 0 0

Вот живой пример кода coden с дополнительными комментариями, измените размер своего окна, чтобы увидеть его обертывание.

ОТВЕТЫ

Ответ 1

TL; DR

Это не то, что я бы назвал решением как таковым, но это довольно изящное обходное решение, которое использует только медиа-запросы и, что более важно, JavaScript!

Mixin (SCSS):

@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
  flex-grow: 1;
  flex-basis: $flex-basis;
  max-width: 100%;

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-viewport-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    @media(min-width: $flex-basis * $multiplier) {
      max-width: percentage(1/$multiplier);
    }
  }
}

Использование:

Примените mixin к элементу flex:

.flex-item {
  @include flex-wrap-fix(100px)
}

Обновление:

Вышеуказанный mixin должен делать трюк, если вы используете ширину контейнера гибкого контейнера в соответствии с размером вашего видового экрана, как это имеет место в примере OP. Запросы в средствах массовой информации не помогут вам в противном случае, потому что они всегда основаны на ширине видового экрана. Тем не менее, вы можете использовать библиотеку css-element-queries и свои запросы к элементу вместо запросов к медиа-браузерам. Здесь находится mixin, который вы можете применить к контейнеру flex:

@mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) {
  display: flex;
  flex-wrap: wrap;

  > * {
    max-width: 100%;
    flex-grow: 1;
    flex-basis: $flex-basis;
  }

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-expected-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    &[min-width~="#{$flex-basis * $multiplier}"] > * {
      max-width: percentage(1/$multiplier);
    }
  }
}

Пояснение:

Скажем, согласно примеру OP, мы хотим, чтобы каждый элемент имел максимальную ширину 100px, поэтому мы знаем, что для ширины браузера 100px мы можем поместить один элемент в строку и так далее:

| Viewport Width | Max Item Count Per Row | Item Width (min-max) |
|----------------|------------------------|----------------------|
| <= 100         | 1                      | 0px - 100px          |
| <= 200         | 2                      | 50px - 100px         |
| <= 300         | 3                      | 50px - 100px         |
| <= 400         | 4                      | 50px - 100px         |
| <= 500         | 5                      | 50px - 100px         |
| <= 600         | 6                      | 50px - 100px         |

Мы можем писать медиа-запросы для создания следующих правил:

| Viewport Width | Max Item Count Per Row | Item Max Width | Calculation |
|------------------------------------------------------------------------|
| <= 100px       | 1                      | 100%           | (100/1)     |
| <= 200px       | 2                      | 50%            | (100/2)     |
| <= 300px       | 3                      | 33.33333%      | (100/3)     |
| <= 400px       | 4                      | 25%            | (100/4)     |
| <= 500px       | 5                      | 20%            | (100/5)     |
| <= 600px       | 6                      | 16.66666%      | (100/6)     |

Вот так:

li {
  flex: 1 0 0
  max-width: 100%;
}

@media(min-width: 200px) {
  li { max-width: 50%; }
}

@media(min-width: 300px) {
  li { max-width: 33.33333%; }
}

@media(min-width: 400px) {
  li { max-width: 25%; }
}

@media(min-width: 500px) {
  li { max-width: 20%; }
}

@media(min-width: 600px) {
  li { max-width: 16.66666%; }
}

Конечно, это повторяющийся, но, скорее всего, вы используете какой-то препроцессор, который может позаботиться о повторении для вас. Именно это делает mixin в разделе TL, DR.

Теперь нам нужно указать 100px как наш flex-basis и, при необходимости, максимальную ширину окна браузера (по умолчанию - 2000px), чтобы создать медиа-запросы для:

@include flex-wrap-fix(100px)

Пример

Наконец, раздвоенная версия исходного примера CodePen с требуемым выходом, используя вышеупомянутый mixin:

http://codepen.io/anon/pen/aNVzoJ

демонстрация решения

Ответ 2

Я экспериментировал с вашим кодепом, и я установил flex: 0 1 10%

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

Я думаю, что это то, что вам нужно. Здесь предварительный просмотр: http://codepen.io/anon/pen/bwqNEZ

Приветствия

Ответ 3

Не работает он очень хорошо, но вы можете добиться чего-то в этом направлении с помощью столбцов.

column-gap: 10px;
column-width: 150px;

https://codepen.io/hobbeshunter/pen/OgByNX

Ответ 4

Мое решение не идеально, поскольку оно опирается на JQuery: http://codepen.io/BigWillie/pen/WwyEXX

CSS

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  min-width: 40px;
  max-width: 100px;
  flex: 1;
}

JavaScript

var eqRowFlexItem = function(elem) {
    var w;
    var $elem = $(elem);
    // Clear out max-width on elements
    $elem.css('max-width', '');
    w = $(elem).eq(0).width();
    $(elem).css('max-width', w);
}

eqRowFlexItem('li');

$(window).resize(function() {
    eqRowFlexItem('li');
});

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

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

JQuery получает ширину первого элемента - и применяет его как максимальную ширину для каждого элемента. OP хотел, чтобы блоки упали в ярость min-width/max-width. Установка max-width в CSS, похоже, работает. Мы очищаем максимальную ширину от элемента, поэтому по умолчанию используется максимальная ширина в CSS... затем получает фактическую ширину.

Ответ 5

Это не идеально, но стоит попробовать. http://codepen.io/anon/pen/MKmXpV

Изменения

li
  width: 7.1428%
  flex: 0 0 auto

figure
  margin: 0 auto
  background-color: darkgreen
  min-width: 40px
  max-width: 100px
  • изменил li flex на "0 0 auto", а ширина li в процентах на основе число lis.
  • переместил минимальную и максимальную ширину от li до фигуры
  • переместил зеленый фон на фигуру и центрировал фигуры в lis

Ответ 6

Установка min-width и max-width в процентах позволила всем изображениям оставаться одинаковой шириной, когда они переходят на следующую строку. Это не идеально, но ближе к тому, что вы после?

li {
  min-width: 15%;
  max-width: 15%;  
}

Ответ 7

Я думаю, что у меня это получилось... но это взломанно. В результате получается 14 изображений, каждое из которых масштабируется от 100 пикселей до 40 пикселей, даже в нескольких рядах.

От 107px до 40px Width

  • Добавлен дублированный набор из 14 оригинальных <li> и добавлен в flex <ul>.

  • Затем второй набор был невидимым:

    li:nth-of-type(n + 15) {
  visibility: hidden;
}

  • Чтобы поддерживать единообразную гибкость, следующие изменения для каждого <li>:

    li {
  min-width: 40px;
  max-width: 10%;
  flex: 1 0 100px;
}

Просмотрите CodePen

и/или Snippet в режиме полной страницы.

ul {
  display: flex;
  flex-wrap: wrap;
  max-height: 258px;
}
li {
  min-width: 40px;
  max-width: 10%;
  flex: 1 0 100px;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  background-color: tomato;
}
li {
  margin: 0.5em;
  background-color: darkgreen;
}
li img {
  width: 100%;
  opacity: 0.5;
}
li figure,
li img {
  margin: 0;
  padding: 0;
}
li:nth-of-type(n + 15) {
  visibility: hidden;
}
<ul>
  <li>
    <figure>
      <img src="http://placekitten.com/g/250/250">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/101/101">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/201/201">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/150/150">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/80/80">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/111/111">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/40/40">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/110/110">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/75/75">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/89/89">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/150/150">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/32/32">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/61/61">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/320/320">
    </figure>
  </li>



  <li>
    <figure>
      <img src="http://placekitten.com/g/250/250">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/101/101">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/201/201">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/150/150">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/80/80">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/111/111">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/40/40">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/110/110">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/75/75">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/89/89">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/150/150">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/32/32">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/61/61">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/320/320">
    </figure>
  </li>
</ul>

Ответ 8

У меня была такая же проблема, поэтому я использовал очень маленький бит JQuery, чтобы контролировать ширину ящиков и сделать их одинаковой шириной даже после их переноса.

Моя демонстрация находится на CodePen Обертка Flex с равной шириной в новой строке

function resize(){
  var colWidth;
  var screen = $(window).width(); 
  
  if(screen < 576){
    colWidth = Math.round(screen / 2) - 31;
    $(".item").width(colWidth);
  } 
  if(screen > 575 && screen < 768){
    colWidth = Math.round(screen / 3) - 31;
    $(".item").width(colWidth);
  } 
  else if (screen > 767 && screen < 992){
      colWidth = Math.round(screen / 4) -31;
      $(".item").width(colWidth);
  }
  else if (screen > 991 ){
      colWidth = Math.round(screen / 6) -31;
      $(".item").width(colWidth);
  }
}
  
window.onresize = function() {
  resize();
}

resize();
html,
body{
  padding:0;
  margin:0;
}
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: left;
  background-color:#ddd;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  

.item {
  background: tomato;
  height: 100px;
  margin:0 15px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="flex-container wrap">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">6</li>
  <li class="item">7</li>
  <li class="item">8</li>
  <li class="item">9</li>
</ul>

Ответ 9

использовать max-width: 40px не max-width: 100px