场景描述:
我想要实现,在展示的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 (<ulstyle={{display: 'flex',flexWrap: 'wrap',listStyleType: 'none',}}>{items.map((item, index) => (<listyle={{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;
在上面的例子中,我们在父组件App
中创建了一个items
数组,并将其作为items
属性传递给ListComponent
组件。你可以根据自己的需求修改items
数组的内容.