html - 如何将flex div中的1个元素完全 flex 到另一个flex div中？

我的爱好网站的博客卡底部似乎出现了一些问题。

如您所见，即时通讯试图在左侧使用标准的作者名称，在右侧使用类似的符号。

无论出于什么原因，我都无法一路向右弯曲。我将父容器的宽度设置为100％。我已经尝试了所有align-self。但是我似乎无法使其正常工作并向专业人士寻求帮助。

.container {
  width: 20%;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  position: relative;
  margin: 10rem auto;
  background-color: white;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .25);
  align-items: flex-start
}

.picture {
  width: 100%;
  height: 25rem;
  background-image: url(./images/adventure.jpg);
  overflow: hidden;
  background-size: cover;
  background-position: center bottom;
  padding-bottom: 2rem;
}

.container__p {
  font-size: 1rem;
  font-weight: 700;
  align-self: center;
  color: #777;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-bottom: .5rem;
  padding-left: .5rem;
  padding-right: .5rem;
  padding-top: 1rem;
  border-bottom: 1px solid lightgrey;
}

.container__header {
  font-size: 3rem;
  text-align: center;
  padding: 1rem;
  align-self: center;
  font-weight: 600;
}

.container__blogsummary {
  font-size: 1.3rem;
  padding-top: 5rem;
  padding: 1rem;
  text-align: center;
  align-self: center;
  color: #777;
}


/*Problem CSS below*/

.icon-basic-heart {
  font-size: 2rem;
  color: red;
  align-self: flex-end;
}

.test {
  display: inline-flex;
  align-items: flex-start;
}

<div class='container'>
  <div class='picture'></div>
  <p class='container__p'><span>Trending<span></p>
			<h1 class='container__header'>Survivng the Amazon Forest</h1>
			<i class='icon-basic-world'></i>
			<p class='container__blogsummary'>
				A matchbox, cantene of water and pocket knife. How I survived the Amazon rainforest for 3 days with just the bare necessaties and how you can too!
			</p>

         <!-- this is the problem div below -->
		<div class='test'>
			<p class='container_author'>James</p>
			<i class='icon-basic-heart'></i>
		</div>
	</div>

当我通过自己创建Flexbox来学习Flexbox时，这可能是一个根本性的错误。也许我今天没有足够的咖啡。提前致谢！

最佳答案

将您的.test CSS更改为此：

.test {
    display: inline-flex;
    align-items: flex-start;
    // Add the following
    justify-content: space-between;
    width: 100%;
}

关于html - 如何将flex div中的1个元素完全 flex 到另一个flex div中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56101509/