css flex-box嵌套布局有问题

Posted 2023-03-15

【中文标题】css flex-box嵌套布局有问题

【英文标题】：css flex-box nested layout have issue

【发布时间】：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有哪些款式？

还没有样式

【参考方案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>
  );
;