React中设置数组遍历项样式：让标题与类型分行显示

Clean

Housekeeping

目前它们是同行显示的：

Clean Housekeeping

请问如何修改CSS实现该效果？

当前代码 #

todolist.jsx

import React from "react";
import "./TodoList.scss";

const TodoList = ({ todos = [] }) => {
  return (
    <div>
      {todos.map((todo) => (
        <ul>
          <li className="todo-list" key={todo.id}>
            {todo.title}
            {todo.type}
          </li>
        </ul>
      ))}
    </div>
  );
};

export default TodoList;

TodoList.scss

.todo-list {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  margin: 10px;
  border: 1px solid #ccc;
}

方法1：修改flex布局为垂直排列 #

当前.todo-list使用display: flex默认是水平方向，只需添加flex-direction: column即可让内部元素垂直分两行：

.todo-list {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column; /* 设置垂直排列 */
  margin: 10px;
  border: 1px solid #ccc;
}

这个方法最简单，不需要修改JSX结构，直接调整CSS即可实现需求。

方法2：移除flex布局，让元素自然换行 #

如果不需要flex的其他特性，可以直接删除display: flex，块级元素内的内容会自动换行。若要强制换行，可给标题或类型添加块级属性：

1. 先修改JSX给内容添加标签包裹：

<li className="todo-list" key={todo.id}>
  <span className="todo-title">{todo.title}</span>
  <span className="todo-type">{todo.type}</span>
</li>

2. 调整CSS：

.todo-list {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  /* 移除 display: flex; */
  margin: 10px;
  border: 1px solid #ccc;
}

.todo-title {
  display: block; /* 强制标题独占一行 */
}

方法3：保留flex并强制换行 #

如果要保留flex布局，可通过flex-wrap和宽度设置强制换行：

1. 修改JSX添加标签包裹：

<li className="todo-list" key={todo.id}>
  <span>{todo.title}</span>
  <span>{todo.type}</span>
</li>

2. 调整CSS：

.todo-list {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-wrap: wrap; /* 允许容器内元素换行 */
  margin: 10px;
  border: 1px solid #ccc;
}

.todo-list > span {
  width: 100%; /* 每个span占满容器宽度，强制换行 */
}

内容的提问来源于stack exchange，提问作者Didi