HTML CSS：将flexbox元素彼此相邻放置

我正在做一个项目，我必须创建一个只使用HTML和CSS的在线书店网页。我想使用下图中的样式显示店铺的“关于我们”信息：

基本上，我想把一个图像和文字的方式显示在上面。但是，使用flexbox时，我无法同步图像和文本，因为我很难设置图像宽度，以覆盖flex容器的一半，而文本的另一半。 这是我的代码：

.flex容器{
显示器：flex；
调整内容：灵活启动；
弯曲方向：行；
背景颜色：橙色；
不透明度：0.7；
}
.flex容器>div{
保证金：0；
宽度：100%；
高度：自动；
}
#fleximg>img{
宽度：60%；
高度：自动；
}
#关于{
宽度：50%；
右边距：300px；
高度：自动；
}

关于我们

在这些艰难的日子里，我们现在所经历的是被迫呆在家里什么都不看实际上什么都没有。这就是为什么我们创建了这个在线图书交付网站，为那些不能外出购买或阅读的人提供图书公司
当地书店的一本书。

您应该设置css类flex container is width:100%和#fleximg is width:50%，#about is width:50%，并使用css中的背景代替img标记

例如：

.flex-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    background-color: orange;
    opacity: 0.7;
    width: 100%;
    height: auto;
  };

  #fleximg {
    width: 50%;
    height: auto;
    background: url('') center no-repeat;
    background-size: cover;
  };

  #about {
    width: 50%;
    margin-right: 0;
    height: auto;
  };

---

首先，如果图像高度高于右列内容-即使是简单的

宽度：100%；高度：
图像的自动
可以工作


div{
边框：2件纯黑；
}
#fleximg{
宽度：100%；
高度：自动；
垂直对齐：中间对齐；
}
.柔性容器{
显示器：flex；
背景颜色：橙色；
}
#fleximg{
弹性基准：40%；
}
#关于{
弹性基准：60%；
显示器：flex；
对齐项目：居中；/*对齐v*/
}

高大形象
关于我们
文本和图像之间有一个空格，因为您已将img设置为其父级的60%宽度。