场景描述：
我想要实现，在展示的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;
在上面的例子中，我们在父组件App中创建了一个items数组，并将其作为items属性传递给ListComponent组件。你可以根据自己的需求修改items数组的内容.