显示中的flex是什么：react中的“flex”？

Question

我是 React 新手，正如标题所示，我的问题是“显示中的 Flex 是什么：React 中的“Flex”？”

在阅读多个文档时，它说它是用于 Flexbox 的，根据我的理解，这是用于布局组件的，但这让我更加困惑。我假设在这种情况下，如果我理解正确的话，Flexbox 将使用高度和宽度来与其他组件保持距离。

const ColoredCircleIcon = ({ color = 'orange', size = 50 }: ColoredCircleIconProps): JSX.Element => {

  const containerStyles: React.CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',    // Full viewport height
    width: '100vw',     // Full viewport width
  };

  return (
    <div style={containerStyles}>
      <FaCircle color={color} size={size} /> {/* Circle Icon */}
    </div>
  );
};

在 react 文档中，它显示了代码示例，但没有任何

display : "flex"

这也引出了一个问题，

display : "flex"

Flexbox 算法需要哪些参数

Answer 1

Flexbox 是它自己的布局 div 的方式，根据您想要它执行的操作，具有许多不同的参数。如果您正在寻找详细信息，可以在 https://www.w3schools.com/css/css3_flexbox.asp

找到它们的宝库