无法为小型设备的弹性盒中的三个元素设计

Question

我是第一次使用React构建投资组合，并且在使用FLEX的三个元素中，我被固定的三个元素在整个设备中对齐，在全屏上，一切都可以。

我要获得的是： 全尺寸（这种情况还可以）：

在小设备中，我现在要检索的是：

我想获得的内容：

图像应位于社交图标的同一行中，我还希望文字“您好我是Amedeo ...和按钮”在社交图标的同一位置垂直启动。

使用的代码是：

HTML：

    function Intro() {
    return (
        <IntroStyled>
            <div className="item-1">
                <SocialMedia />
            </div>

            <div className="item-2">
                <h1>Hi, I'm Amedeo</h1>
                <p>Tech Entusiast</p>
                <Button />
            </div>
            <div className="item-3">
                <img src={Amedeo} alt="Amedeo_Image" />
            </div>
        </IntroStyled>
    );
}

CSS：

export const IntroStyled = styled.div`
    height: 100vh;
    width: 100vw;
    display: flex;
    //background-color: yellow;
    align-items: center;
    justify-content: center;

    h1 {
        font-size: 40px;
        margin: 0;
    }

    .item-1 {
        order: 1;
    }
    .item-2 {
        order: 2;
    }
    .item-3 {
        order: 3;
    }

    @media screen and (max-width: 768px) {
        flex-direction: column;
        .item-1 {
            order: 1;
        }
        .item-2 {
            order: 3;
        }
        .item-3 {
            order: 2;
        }
    }
`;

社交媒体图标： HTML：

function SocialMedia() {
    return (
        //dimensione icone default =24
        <SocialMediaStyled>
            <a href="#" className="icon" target="_blank">
                <UilLinkedin size="24" />
            </a>
            <a href="#" className="icon" target="_blank">
                <UilInstagram size="24" />
            </a>
            <a href="#" className="icon" target="_blank">
                <UilGitHub size="24" />
            </a>
        </SocialMediaStyled>
    );
}

CSS：

export const SocialMediaStyled = styled.div`
    display: flex;
    flex-direction: column;
    margin-right: 100px;

    @media (max-width: 798px) {
        margin-right: 20px;
        margin-left: 20px;
    }

    .icon {
        color: ${Colors.firstColor};
        margin-bottom: 10px;

        &:hover {
            color: ${Colors.firstColor_Alt};
        }
    }
`;

您能帮我吗？ 多谢 Amedeo

编辑： 在@antokhio评论之后，我更改了代码，现在我能够在我有一个小设备时检索预期的结果，如下图中所示：

​当我处于全尺寸时。订单属性无法正常工作

新代码：

html

function Intro() {
    return (
        <IntroStyled>
            <div className="intro_container">
                <div className="social_image_container">
                    <div className="item-1">
                        <SocialMedia />
                    </div>
                    <div className="item-3">
                        <img src={Amedeo} alt="Amedeo_Image" />
                    </div>
                </div>

                <div className="item-2">
                    <h1>Hi, I'm Amedeo</h1>
                    <p>Tech Entusiast</p>
                    <Button />
                </div>
            </div>
        </IntroStyled>
    );
}

css：

export const IntroStyled = styled.div`
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;

    h1 {
        font-size: 40px;
        margin: 0;
    }

    .intro_container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .social_image_container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .item-1 {
        order: 1;
    }
    .item-2 {
        order: 2;
    }
    .item-3 {
        order: 3;
    }

    @media screen and (max-width: 768px) {
        .intro_container {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }

        .item-1 {
            order: 1;
        }
        .item-2 {
            order: 3;
            margin-left: 20px;
        }
        .item-3 {
            order: 2;
        }
    }
`;

Answer 1

以下是实现这一目标的方法：

1. 将Divs Item-2和Item-3放入另一个样式的组件中。
   我命名了这个新的样式组件progiledScStyled。这个新
   内部样式组件将处理内部挠性定位
   这两个divs。

2. 现在将此放置在与item-1相同级别的第二个DIV中介绍了组件。我给这个div的类名称为profile-desc-div。

请参阅下面的代码（我使用Ellipsis ...指示我没有更改的代码部分，并且简洁地说明）：

...
<IntroStyled> 
    <div className="item-1">
        <SocialMedia />
    </div>

    <div className="profile-desc-div">
        <ProfileDescStyled>
            <div className="item-2">
                <h1>Hi, I'm Amedeo</h1>
                <p>Tech Entusiast</p>
                {/* <Button /> */}
            </div>
            <div className="item-3">
                <img src={logo} alt="Amedeo_Image" width={500} />
            </div>
        </ProfileDescStyled>
    </div> 
</IntroStyled>
...

以下步骤适用于上面的样式组件定义：

3. item-2和item-3在内内>内外定义中删除flex订单属性。

4. <强>为DIV profile-desc-div添加弹性顺序，并分配2。

   的值。

5. 从内部删除媒体查询完全定义。

6. profiledEscStyled定义 display>显示：flex 和flex方向：列垂直堆叠其中的元素。

7. 最后设置添加媒体查询目标item-item-2和item-3，然后翻转其flex订单属性，如下所示。

so：so：so：so：

export const IntroStyled = styled.div`
  ...

  .item-1 {
    order: 1;
  }

  .profile-desc-div {
    order: 2;
  }
`; 

export const ProfileDescStyled = styled.div`
  display: flex;
  flex-direction: column;

  @media screen and (max-width: 768px) {
    .item-2 {
      order: 3;
    }
    .item-3 {
      order: 2;
    }
  }
`;