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

Question

I have a flex container which has 3 elements inside of it (X, Y, Z).

Currently, X, Y and Z are stacked like a row. However, I want to make Y and Z be stacked like a column without affecting X.

Here is the Codepen which also explains better what I want to achieve:

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

I have tried applying flex-direction: column : to Y and Z (user's awards and user's sketches) however it doesn't affect them (I guess it can only be applied through the parent node). Is there any way I can achieve this?

Or even better, perhaps using Flexbox is overkill and there's a better alternative?

Thank you.

Answer 1

You need to have a wrapper and style that accordingly. As you noted - flex only applies to DIRECT children of the felx container - there fore - adding a wrapper will break that cycle and apply normal layout.

 #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>

Answer 2

This can be done in flexbox without nesting, The only drawback is you have to define a height.

 body * { padding: 10px; border: 1px solid; } [flex] { display: flex; flex-wrap: wrap; flex-direction: column; height: 200px; } [a] { flex: 1 0 100%; box-sizing: border-box; } [b], [c] { flex: 1 0 0%; }

 <div flex> <div a>A</div> <div b>B</div> <div c>C</div> </div>

---

The more flexible way to achieve this is to use CSS Grid

 body * { padding: 10px; border: 1px solid; } [grid] { display: grid; grid-template-columns: 1fr 1fr; } [a] { grid-row: span 2; }

 <div grid> <div a>A</div> <div b>B</div> <div c>C</div> </div>