How to apply flex-direction only to certain elements inside a flex container?

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.

related: https://stackoverflow.com/q/42946454/8620333 – Temani Afif May 19 '20 at 00:39 — Temani Afif, May 19 '20 at 00:39

score 1 · Answer 1 · answered May 18 '20 at 23:50

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>

hey, thank you so much for taking your time to answer my question! it works great. do you know if there is a way to change A's height without affecting B and C? because the user may have a lot of sketches and the profile-info goes all the way down. either way, thanks a lot! — kibe, May 19 '20 at 03:38

score 1 · Answer 2 · answered May 19 '20 at 00:15

1

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>

answered May 19 '20 at 00:15

Rainbow

6,772
3
11
28

hey man, thank you so much for taking your time to answer my question! it works great. do you know if there is a way to change A's height without affecting B and C? because the user may have a lot of sketches and the profile-info goes all the way down. either way, thank you so much! – kibe May 19 '20 at 03:37
@kibe Something like [this](https://jsfiddle.net/6vq0to1j/) ? That is not flexible because of the way flexbox is setup and in Grid it's not possible. Your best bet is to nest if you want such layout – Rainbow May 19 '20 at 12:22

How to apply flex-direction only to certain elements inside a flex container?

2 Answers2