css flex-box嵌套布局有问题答案

【问题标题】：css flex-box nested layout have issuecss flex-box嵌套布局有问题
【发布时间】：2021-10-06 04:28:47
【问题描述】：

我不能很好地使用 flex-box。

这是当前状态：

我想要这个弹性布局：

这是我的代码：

Lobby.js（容器）

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

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

Profile.js

const ProfileBlock = styled.div`
    
`;

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

我该怎么办？ ..T_T

【问题讨论】：

Profile.js有哪些款式？
还没有样式

标签： css reactjs flexbox styled-components

【解决方案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>
  );
};

【讨论】：