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

场景描述:

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

效果如下:
前端案例-css实现ul中对li进行换行_第1张图片

方法一:使用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语法来渲染一个

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

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

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

    最后,我们通过export defaultListComponent组件导出,以便在其他地方使用它。

    方法二:还有另一种方法就是使用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;
      
      

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

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

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

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

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

          最后,我们通过export defaultListComponent组件导出,以便在其他地方使用它。

          你可以在父组件中使用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;
          
          

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

你可能感兴趣的:(前端React,前端,css)