前端案例-css实现ul中对li进行换行

场景描述：

我想要实现，在展示的item个数少于4个的时候，则排成一行，并且均分（比如说有3个，则每个的宽度为33.3%），如果item 个数大于4，则进行换行。

效果如下：

方法一：使用flex进行换行

ul {
  display: flex; // 用于换行
  flex-wrap: wrap;
  list-style-type: none;
}

li {
  flex-basis: 25%; /* 每个项的基础宽度为20%，即每行显示5列 */
}

@media (max-width: 4 * 25%) {
  li {
    flex-basis: calc(100% / 4); /* 计算每个项的宽度，使其在小于等于4个项时均分 */
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如果是在react组件里，内置样式的话，可以通过如下实现。

const ListComponent = ({ items }) => {
  return (
    <ul
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        listStyleType: 'none',
      }}
    >
      {items.map((item, index) => (
        <li
          style={{
            flexBasis: item.length < 5 ? `${100 / item.length}%` : '20%',
			textAlign :'center'
          }}
          key={index}
        >
          {item}
        </li>
      ))}
    </ul>
  );
};

export default ListComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在上面的代码中，我们使用箭头函数定义了ListComponent函数组件，并接受一个items属性。

在组件的返回值中，我们使用JSX语法来渲染一个

元素和若干个
• 元素。我们使用display: 'flex'和flexWrap: 'wrap'样式来实现换行效果。listStyleType属性设置为none以去除默认的列表样式。

  然后，我们使用map()函数遍历items数组，并为每个项创建一个

• 元素。我们使用条件语句来确定flexBasis属性的值。如果项的长度小于5，我们将flexBasis设置为${100 / item.length}%，以实现均分效果。否则，我们将flexBasis设置为25%，以每行显示4列。

  最后，我们通过export default将ListComponent组件导出，以便在其他地方使用它。

  方法二：还有另一种方法就是使用grid布局

  当使用React函数组件来实现一个

  和
  • 列表，在小于等于4个项时排成一行并均分，在大于4个项时每行显示4列，并在超过4列时换行，可以按照以下方式编写代码：

    import React from 'react';
    
    function ListComponent({ items }) {
      return (
        <ul style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${Math.min(items.length, 4)}, 1fr)`,
          gap: '10px',
          listStyleType: 'none',
        }}>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      );
    }
    
    export default ListComponent;
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    在上面的代码中，我们创建了一个名为ListComponent的React函数组件。它接受一个items属性，这是一个包含要显示的项的数组。

    在组件的返回值中，我们使用JSX语法来渲染一个

    元素和若干个
    • 元素。通过设置
      元素的样式，我们使用Grid布局来达到所需的效果。gridTemplateColumns属性使用repeat()函数来动态设置列的数量。Math.min(items.length, 4)确保在小于等于4个项时，列的数量不超过4。gap属性用于设置列之间的间距。listStyleType属性设置为none以去除默认的列表样式。

      然后，我们使用map()函数遍历items数组，并为每个项创建一个

      • 元素。我们使用index作为key属性来确保每个项都有唯一的标识。

        最后，我们通过export default将ListComponent组件导出，以便在其他地方使用它。

        你可以在父组件中使用ListComponent并传递items属性，如下所示：

        import React from 'react';
        import ListComponent from './ListComponent';
        
        function App() {
          const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'];
        
          return (
            <div>
              <h1>List Example</h1>
              <ListComponent items={items} />
            </div>
          );
        }
        
        export default App;
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16

        在上面的例子中，我们在父组件App中创建了一个items数组，并将其作为items属性传递给ListComponent组件。你可以根据自己的需求修改items数组的内容.