Align 3 divs in one container (flex column)

Question

I have one div, which contains 3 divs, in flex-direction column.

Is there any way, I can make the bottom two red divs, sit next to each other (side by side). And not on top of each other? Like this:

I know I can store these two red divs in another row and set the direction to row.

But I wondered if this can be achieved, specifically with this html structure:

Thanks,

.main {
  display: flex;
  flex-direction: column;
  width: 200px;
  border: 1px solid black;
}

.top {
  background-color: blue;
  color: red;
  width: 100%;
  height: 50px;
}

.bottom {
  background-color: red;
  color: white;
  width: 50%;
  height: 50px;
}

    <div class="main">
      <div class="box top">Box 1</div>
      <div class="box bottom">Box 2</div>
      <div class="box bottom">Box 3</div>
    </div>

<div class="main">
  <div class="box top">Box 1</div>
  <div class="box bottom">Box 2</div>
  <div class="box bottom">Box 3</div>
</div>

score 1 · Answer 1 · answered Jan 13 '21 at 16:35

You could wrap your bottom boxes in a new container with display: flex and flex-direction: row. Since you have your main wrapper as flex column, the children will align themselves as a column regardless of their width. You are basically giving in this instance a child to main which sets itself in the column layout that has in its turn children that set themselves in a row layout :)

.main {
  display: flex;
  flex-direction: column;
  width: 200px;
  border: 1px solid black;
}

.box-bottom-wrapper {
  display: flex;
  flex-direction: row;
}

.box-top {
  background-color: blue;
  color: red;
  width: 100%;
  height: 50px;
}

.box-bottom {
  background-color: red;
  color: white;
  width: 50%;
  height: 50px;
}

<div class="main">
      <div class="box-top">Box 1</div>
      <div class=box-bottom-wrapper>
        <div class="box-bottom">Box 2</div>
        <div class="box-bottom">Box 3</div>
       </div>
    </div>

Thanks Jorge, I know I can do it this way. I was wondering if it is possible, as only 3 divs, in one container, as per the original code. — Reena Verma, Jan 13 '21 at 16:39

score 1 · Accepted Answer · answered Jan 13 '21 at 16:39

Validate if this is what you want.

I removed the orientation and worked on the flex property values.

I also added the flex-wrap property to the container.

The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines

values definition:

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 0 1 100%;`

You can read the documentation here.

.main {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px solid black;
}

.top {
  flex: 0 1 100%;
  background-color: blue;
  color: red;
  height: 50px;
}

.bottom {
  flex: 1;
  background-color: red;
  color: white;
  height: 50px;
}

<div class="main">
      <div class="box top">Box 1</div>
      <div class="box bottom">Box 2</div>
      <div class="box bottom">Box 3</div>
    </div>

Thank you @martinho this is perfect! I always get confused with grow/shrink, but this is amazing, thank you so much. I'll have a good read of this solution to understand it. — Reena Verma, Jan 13 '21 at 16:52

Align 3 divs in one container (flex column)

2 Answers2