упорядочить элементы в столбце flex без указания высоты для родителя - PullRequest
Новая
       57

упорядочить элементы в столбце flex без указания высоты для родителя

0 голосов
/ 14 октября 2019

Привет, у меня есть этот сценарий, подобный этому, я достиг этого до определенного предела, но для этого мне нужно дать Высоту UL, 

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 120px;
}

li {
  height: 50px;
  width: 50px;
  background: red;
  margin-bottom: 10px;
  list-style: none;
  text-align: center;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

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

like this

Порядок предметов для меня не имеет значения, но требуется, чтобы в одной строке было не более 5 предметов,

, и еслиВсего 6 предметов, затем 3 сверху и 3 снизу. Таким образом, элементы будут поровну разделены на строки, подобные этой. и это условие уже выполнено.

enter image description here

Я также открыт для использования сетки.

Ответы [ 2 ]

1 голос
/ 14 октября 2019

Я не уверен, что это послужит цели, но это все, что я могу придумать.

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

Если вы хотите убрать поля, не забудьте откорректировать расчет 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


li {
  list-style: none;
}

.parent {
  display: flex;
}

.left {
  flex: 1 0 40%;
}

.right {
  flex: 1 0 60%;
}

.parent>li>ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.parent>li>ul>li {
  height: 50px;
  width: 50px;
  background: red;
  margin: 10px;
}

.left>ul>li {
  flex: 0 0 calc(50% - 20px);
}

.right>ul>li {
  flex: 1 0 calc(33.3% - 20px);
}
<ul class="parent">
  <li class="left">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li class="right">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

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

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

Теперь это будет служить цели, только когдау нас есть 13 предметов, поэтому вам придется отключить его, когда нет 

ul {
  border: 1px solid;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  margin: 30px;
}

li {
  height: 50px;
  width: 50px;
  background: red;
  border: 1px solid;
  list-style: none;
  text-align: center;
}

/* select before last item to push last item down */
ul>li:nth-last-child(2) {
  background: lime;
  grid-column: 2 /6;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
0 голосов
/ 14 октября 2019

чтобы удалить высоту из элемента ul, удалите высоту и на li следующее: 

.ul {
height: 100px;
width: 250px;
background: red;
margin-bottom: 10px;
list-style: none;
text-align: center;
}

в идеале вы должны использовать max-width и min-width на lielement.

При использовании этого вы столкнетесь с проблемой выравнивания вертикальных li элементов. Чтобы решить эту проблему, используйте пустые элементы li, чтобы сопоставить счетчик последней строки с указанными выше строками и установите пустое значение li min-width в 0;

Это должно быть в состоянии решить вашу проблему. Надеюсь, это поможет !!!!

...