如何在 React 中对多个孩子使用 flexbox？

【问题标题】：How do I use flexbox on multiple children in React?如何在 React 中对多个孩子使用 flexbox？
【发布时间】：2021-07-21 20:38:13
【问题描述】：

我正在尝试使用 flexbox 来应用 flex-direction: 列。我的父组件中有两个子组件，但是当我在父组件上使用 flexbox 时，它将子组件视为一个实体。示例代码如下。

App.js sn-p

function App() {
  return (
          <Tasks>
            <ShowBy />
            <SortBy />
          </Tasks>
  );

Tasks.js sn-p

export default function Tasks ({ children }) { 
    return (
        <div className={styles.container}>
            {children}
            <p>Tasks</p>
        </div>
    )
}

Tasks.module.css（作为样式导入）

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

实际输出： ActualOutput

预期输出：要在列中显示的子项：首先是 ShowBy，其次是 SortBy，然后是 Tasks

【问题讨论】：

标签： reactjs

【解决方案1】：

您遇到的问题是因为 flex 仅适用于元素而不适用于文本。看看下面的两个例子。

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

<div class="container">
    Show By
    Sort By
    <p>Tasks</p>
</div>

如果您想将它们放在一列中，请将您的文本包装在 div、p、span 等元素中。

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

<div class="container">
    <p>Show By</p>
    <p>Sort By</p>
    <p>Tasks</p>
</div>

在您的上下文中，您需要更改内部的 ShowBy 和 SortBy 组件。

【讨论】：