Конвертировать гибкий макет из шести столбцов в три столбца

Question

У меня есть строка с шестью элементами списка.На точке останова 992px я хочу превратить эту схему из шести столбцов в схему из трех столбцов.

Я могу просто сделать flex-direction: column для одного столбца, но не уверен, как бы я поступил в отношении трехколоночного макета.

Текущий подход:

.list-items-ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  border: 1px solid #000;
}

.list_item-container {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0px 20px;
}

@media (max-width: 992px) {
  .list-items-ul {
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

<ul class="list-items-ul">
  <li>
    <div class="list_item-container">
      <span>Col 1</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 2</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 3</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 4</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 5</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 6</span>
    </div>
  </li>
</ul>

Answer 1

Вы вообще не хотите использовать column вообще.Просто скажите от ul до wrap с помощью flex-wrap:wrap; и сделайте так, чтобы ширина тега li занимала процентную долю доступных столбцов, которые вы хотите.Например, если вы хотите 3 столбца, вы используете 33.33% width в li, если вы хотите 2 столбца, вы используете 50%.

. Кроме того, вы должны удалить границу из тега li и поставитьон находится на внутреннем элементе div, поэтому не имеет значения ширины 33,33%.

A: Удалите CSS для тега li.

B: Добавить это:

.list_item-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  padding: 0px 20px;
}

@media (max-width: 992px) {
  .list-items-ul {
    flex-wrap: wrap;
  }
  .list-items-ul li { width: 33.33%;}
}

** Полный пример: **

.list-items-ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

.list_item-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  padding: 0px 20px;
}

@media (max-width: 992px) {
  .list-items-ul {
    flex-wrap: wrap;
  }
  .list-items-ul li { width: 33.33%;}
}

<ul class="list-items-ul">
  <li>
    <div class="list_item-container">
      <span>Col 1</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 2</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 3</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 4</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 5</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 6</span>
    </div>
  </li>
</ul>

Answer 2

Другое решение для вас, если вы хотите сохранить flex-direction: column.

 .list-items-ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  border: 1px solid #000;
}

.list_item-container {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0px 20px;
}

@media (max-width: 992px) {
  .list-items-ul {
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  li{
    width: calc(100%/3);
    height: auto;
  }
}

Jquery: выберите и получите высоту из элемента списка, в этом примере я просто предполагаю, что это то же самое, но вРеальный проект, каждый элемент списка будет отличаться идентификатором.По сути, идея заключается в переносе externalHeight из Col 1 и Col 2, а затем суммировать его и устанавливать эту высоту для родителя, чтобы сработал flex-wrap: wrap.Каждый раз, когда он достигает этой высоты, он перемещается в следующий ряд.И он будет автоматически настраиваться при изменении содержимого.

const container = $('.list-items-ul');
const heightListItem = $('li').outerHeight(); //have to grap the height from each item and sum it
const heightContainer = container.outerHeight(heightListItem*2); 

Answer 3

Используйте flex-direction: row; для ul и flex:0 1 45%; для li в media-query

.list-items-ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  border: 1px solid #000;
}

.list_item-container {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0px 20px;
}

@media (max-width: 992px) {
  .list-items-ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  }
  li{
   flex:0 1 45%;
  }
}

<ul class="list-items-ul">
  <li>
    <div class="list_item-container">
      <span>Col 1</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 2</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 3</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 4</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 5</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 6</span>
    </div>
  </li>
</ul>