有没有办法使用 flex 属性将图像放在段落旁边？答案

【问题标题】：Is there a way to put the image just next to the paragraph using flex properties?有没有办法使用 flex 属性将图像放在段落旁边？
【发布时间】：2022-02-11 06:33:08
【问题描述】：

我尝试将justify-content 设置为space-between，但这也不起作用。

图片似乎就在段落的下方。但我希望它看起来像这样。

Home.jsx

import '../App.css';
import './Home.css';
import pic from './portfolio-image.jpeg';
import React, { Component } from 'react';



function Home(){
    return(
        <div className='safe-area'>
            <div id = 'home-container'>

                <div id = 'home-text-container'>
                    <div id='home-head'>
                        Hi, I'm <Name>.
                    </div>

                    <div id = 'home-body'>
                        I am passionate about software and web development. I like solve interesting and new problems through my expertise in coding.
                        I like to work with React, Firebase, MongoDB, Express, Python and more.
                    </div>
                </div>


                <div id = 'image-social-container'>
                    <img src= {pic} />
                    
                </div>

            </div>
        </div>
    );
}


export default Home;

主页.css

#home-container{
    display: flex;
    flex-flow: row wrap;

    align-content: center;
    justify-content: space-between;
    
    height: 75vh;
    margin-left: 2cm;
    margin-right: 2cm;

    background-color: black;
}

#home-text-container{
    display: flex;
    flex-direction: column;

    width: 50%;
    line-height: 40px;
}


#home-head{
    font-family: 'Roboto', sans-serif;
    font-size: 210%;
    font-weight: 400;
    color: #b8fff1;
}

#home-body{
    font-family: 'Roboto', sans-serif;
    font-size: 140%;
    font-weight: 300;
    color: #b8fff1;
}

#image-social-container{
    display: flex;
    flex-direction: column;
}


#image-social-container img{
    width: 15%;
    border-radius: 10%;

    align-self: flex-end;
}

【问题讨论】：

如果你有一个基于网格布局的布局，你可能想要use CSS grid而不是flexbox。

标签： html css reactjs

【解决方案1】：

我不确定您的布局目标究竟是什么，但我会先从您的 img 样式中取出 width: 15%; 行。见this CodePen example我为你准备好了。

一些 CSS 问题：

ID 过多。考虑将ids 替换为classes。实际上，您可以只依靠基本的级联规则来避免不必要的id/class 碎片
混合不同的测量单位（例如cm、vh、% 和px）：我建议您在混合和匹配它们之前了解每种测量的实际作用。例如，% 值可能意味着一些不同的东西，具体取决于它的用途和元素的父元素是什么。

【讨论】：

请注意，除了删除 width: 15% 行之外，我没有修复 CodePen 示例中的任何其他内容——只是为了展示它如何开始更好地为您工作。

【解决方案2】：

您可以尝试在容器上使用 flex-direction: column。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。