根据条件增加或减少列表项宽度

Question

我有一个列表项，如下所示

<ul>
    <li>One<li>
    <li>One-One<li>
    <li>Two</li>
    <li>Two-Two</li>
</ul>

输出可以是动态的，一次显示两列，一次显示一列 像这样

两列方案

一个|一对一

两个|两两

一栏情景

一

两个

请帮助我如何根据场景增加宽度和减小宽度。我使用带有html5和css3的角度JS。

感谢您的帮助。

Answer 1

使用display:flex和@media查询的解决方案。通过调整输出窗口大小来检查以下示例。

＆＃13;

＆＃13;

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
li {
  width: 50%;
}
@media (max-width: 40em) {
  li {
    width: 100%;
  }
  li:nth-child(even) {
    display: none;
  }
}

＆＃13;

<ul>
  <li>One</li>
  <li>One-One</li>
  <li>Two</li>
  <li>Two-Two</li>
</ul>

＆＃13;

＆＃13;

＆＃13;