显示中的flex是什么:react中的“flex”?

问题描述 投票:0回答:1

我是 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 算法需要哪些参数

reactjs typescript react-native react-typescript
1个回答
0
投票

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

找到它们的宝库
© www.soinside.com 2019 - 2024. All rights reserved.