Question

我有两个并列的清单。在桌面上，这些列表将li元素显示为一列。但是，对于移动设备，我希望li成为两列布局，每列中具有相同的选项。即如果总共有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：

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

iPhone 6/7/8：

如您所见，结构在较小的屏幕上破裂。

Answer 1

在这里，请尝试以全屏方式播放该代码段并调整屏幕大小。根据您的需要调整或应用正确的媒体查询。还请记住，设备既可以是纵向设备也可以是横向设备。在大屏幕上，显示默认列表，在小屏幕上，我们强制列表中断：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>

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

1 个答案: