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

news2024/11/20 3:25:11

场景描述：

我想要实现，在展示的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个项时均分 */
  }
}

如果是在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;

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

在组件的返回值中，我们使用JSX语法来渲染一个<ul>元素和若干个<li>元素。我们使用display: 'flex'和flexWrap: 'wrap'样式来实现换行效果。listStyleType属性设置为none以去除默认的列表样式。

然后，我们使用map()函数遍历items数组，并为每个项创建一个<li>元素。我们使用条件语句来确定flexBasis属性的值。如果项的长度小于5，我们将flexBasis设置为${100 / item.length}%，以实现均分效果。否则，我们将flexBasis设置为25%，以每行显示4列。

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

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

当使用React函数组件来实现一个<ul>和<li>列表，在小于等于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;

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

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

然后，我们使用map()函数遍历items数组，并为每个项创建一个<li>元素。我们使用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;