css flex-box 嵌套布局有问题

Question

我不能很好地使用 flex-box。
这是当前状态:

我想要这个 flex 布局:

这是我的代码:
Lobby.js(容器)

const TopBlock = styled.div`
    display: flex;
`;

const Lobby = () => {
    return (
        <>
            <TopBlock>
                <CreateRoom />
                <Profile />
            </TopBlock>
        </>
    )
}

配置文件.js

const ProfileBlock = styled.div`
    
`;

const Profile = () => {
    return (
        <ProfileBlock>
            <p>hello0</p>
            <p>hello1</p>
            <p>hello2</p>
        </ProfileBlock>
    )
}

我该怎么办？ ..T_T

Answer 1

我想，ProfileBlock应该包裹起来并放入您的 <p>hello</p> .因为如果使用 flexbox为 ProfileBlock在这种情况下看起来像一个容器，用于在我们需要的容器内进行分组 wrapper . working example
Lobby.js(容器)

const TopBlock = styled.div`
  display: flex;
  height: 100vh;
`;

export const Lobby = () => {
  return (
    <>
      <TopBlock>
        <CreateRoom />
        <Profile />
      </TopBlock>
    </>
  ); 
};

Profile.js

const ProfileBlock = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  border: 3px solid red;
  div {
    display: flex;
    flex-wrap: wrap;
  }
  p {
   width: 200px;
   display: flex;
   color: black;
   padding: 15px;
   border: 2px solid blue;
  }
`;

export const Profile = () => {
  return (
    <ProfileBlock>
      <div className="profile-wrapper">
        <p>hello0</p>
        <p>hello1</p>
        <p>hello2</p>
      </div>
    </ProfileBlock>
  );
};