使用 flex 将列表分成相等元素的列答案

【问题标题】：Break a list into columns of equal elements using flex使用 flex 将列表分成相等元素的列
【发布时间】：2018-11-22 10:47:56
【问题描述】：

我有两个并排放置的列表。在桌面上，这些列表会将li 元素显示为一列。但是，对于移动设备，我希望li 成为两列布局，每列具有相同的选项。 IE。如果总共有 11 个 li 元素，则它将是一列 6 列，另一列 5 列。不希望一列中有 8 个元素，而另一列中有 3 个。

我想要达到的目标：

一列最多包含五个 li 元素。
如果一列的列表只有五个元素，则只显示一个居中的列。

我当前的方法使用 max-height 属性，这会破坏移动设备上的布局，但这是我遇到的唯一一种可行的方法。

示例代码：

.main__wrapper{
  display:flex;
  flex-direction: row;
}

.wrapper-one{
  padding-left:40px;
}

ul{  
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align:center;
}

ul li{
  font-size: 1rem;
  overflow: hidden;
}

 @media (max-width:576px) {
   ul{
    -webkit-flex-flow: wrap column;
    text-align: center;
    flex-flow: wrap column;
    max-height: 400px;
    border: 1px solid red;
   }
   ul li{
     max-width: 50%;
   }
   
 }

<div class="main__wrapper">

<div class="wrapper-one">

<h3>Heading 1</h3>
<ul>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>

</div>
<div class="wrapper-one">
<h3>Heading 2</h3>
<ul>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>
</div>
</div>

目前，如果列表元素超过五个，我的列表会显示在两列中，但 max-width: 400px; 会破坏移动设备上的布局。宽度用于强制每列最多 5 个。

iPhone 6/7/8 Plus：

第二个列表（视频类型），该列有五里，因此我希望它居中。

iPhone 6/7/8：

如您所见，结构在较小的屏幕上中断。

【问题讨论】：

你有没有想过 CSS-columns 而不是 flexbox（甚至是 CSS-Grid）！？

标签： html css flexbox

【解决方案1】：

在这里，尝试全屏模式下的 sn-p 并调整屏幕大小。根据您的需要调整或应用正确的媒体查询。还要记住设备可以是纵向和横向的。在大屏幕中显示默认列表，在小屏幕中我们强制列表中断：Is there a way to break a list into columns?

@media only screen and (max-width: 600px) {
    /* For mobile phones: */
	.list{
      -moz-column-count: 2;
      -moz-column-gap: 20px;
      -webkit-column-count: 2;
      -webkit-column-gap: 20px;
      column-count: 2;
      column-gap: 20px;
	}
}

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>


<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>


</body>
</html>

【讨论】：