html - 如何仅将 flex-direction 应用于 flex 容器内的某些元素？

Question

我有一个 flex 容器，里面有 3 个元素（X、Y、Z）。

目前，X、Y 和 Z 像一行一样堆叠。但是，我想让 Y 和 Z 像柱子一样堆叠而不影响 X。

这是 Codepen，它也更好地解释了我想要实现的目标：

https://codepen.io/kibezin/pen/qBOQypy

我尝试将flex-direction: column: 应用于 Y 和 Z（用户的奖项和用户的草图），但它不会影响它们（我想它只能通过父节点应用）。有什么办法可以做到这一点？

甚至更好，也许使用 Flexbox 是多余的，有更好的选择吗？

谢谢你。

标签： htmlcssflexbox

Answer 1

你需要有一个包装器和相应的样式。正如您所指出的 - flex 仅适用于 felx 容器的 DIRECT 子级 - 因此 - 添加包装器将打破该循环并应用正常布局。

#profile-container
{
	display: flex;
}
#profile-container>div:not(#profile-info)
{
	flex-wrap: 1;
}

#profile-info
{
	transform: translateY(25px);
	padding-top: 10px;
	text-align: center;
	margin-left: 10px;
	margin-right: 20px;
	flex-grow: 1;
	min-width: 250px;
	max-width: 250px;
	height: 500px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.1);
}

#profile-sketch
{
	background-color: yellow;
	display: block;
	width: 150px;
	height: 150px;
	border: 1px solid black;
}

<div id="profile-container">
    <aside id="profile-info">
        <div id="profile-sketch"></div>
        <br>
        <hr>
        <span id="profile-username">username</span>
        <span id="profile-karma">350</span>
        <br>
        <span id="profile-bio">About:</span>
    </aside>
    <div class="profile-awards-and-">
    
      <div id="profile-awards-wrapper">
          <h2>user's awards</h2>
          <ul> 
            <li> award 1</li>
            <li> award 2</li>
            <li> award 3</li>
          </ul>
      </div>

      <div id="profile-sketches-wrapper" >
          <h2>user's sketches</h2>
          <div id="profile-sketches-placeholder">
          SKETCH 1, SKETCH 2, SKETCH 3
          </div>
      </div>
    </div>
</div>