Question 184079 in Html Question posted in
Some basic documentation can be found here.

Html – How to properly nest flexbox

I am trying to create a layout that looks like this

I can get the screen split in two halves down the middle, and something on the right hand side vertically centered.

However, when i try to nest a flexbox on the right side, i cant get it to spread across the width of the right hand side.

html {
  height: 100%;
}

body {
  height: 100%;
}

.row {
  display: flex;
  height: 100%;
}

.column {
  flex-basis: 50%;
  box-sizing: border-box;
  
  border: 1px black solid;
}

.row2 {
  display: flex;
  justify-content: space-between;
  border: 1px black solid;
}

.column2 {
  box-sizing: border-box;
  border: 1px black solid;
}

.content {
  display: flex;
  align-items: center;
}
<div class="row">
  <div class="column">
      test title
  </div>

  <div class="column content">
    <div class="row2">
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
    </div>
  </div>
</div>

I thought the justify-content: space-between in row2 would evenly spread the 4 (or some other amount) "abc"s across the width of the right half of the screen, but they just stack up on the left. It seems that the row2 is not filling the width of the parent properly. I’m guessing the justify-content is working but has no width to spread the items across. How can i fix this?

Tags:

2

Answers


  1. 0

    All you need to do is make .row2 100% width. I also changed it to space-around since that seems more like what you’re going for in your screenshot.

    .row2 {
  display: flex;
  justify-content: space-around;
  border: 1px black solid;
  width: 100%;
}

    html {
  height: 100%;
}

body {
  height: 100%;
}

.row {
  display: flex;
  height: 100%;
}

.column {
  flex-basis: 50%;
  box-sizing: border-box;
  
  border: 1px black solid;
}

.row2 {
  display: flex;
  justify-content: space-around;
  border: 1px black solid;
  width: 100%;
}

.column2 {
  box-sizing: border-box;
  border: 1px black solid;
}

.content {
  display: flex;
  align-items: center;
}
    <div class="row">
  <div class="column">
      test title
  </div>

  <div class="column content">
    <div class="row2">
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
    </div>
  </div>
</div>

    If you want to make the "abc" boxes squares, you can use aspect-ratio: 1, and to make them as big as they can be inside their container, you can use flex-grow: 1. Finally, add a bit of margin to them to give them some spacing. (Technically, you no longer need space-around anymore with this method, since the boxes will grow to fill the entire container anyway, unless you set a fixed height for the abc boxes.)

    html {
  height: 100%;
}

body {
  height: 100%;
}

.row {
  display: flex;
  height: 100%;
}

.column {
  flex-basis: 50%;
  box-sizing: border-box;
  
  border: 1px black solid;
}

.row2 {
  display: flex;
  border: 1px black solid;
  width: 100%;
}

.column2 {
  box-sizing: border-box;
  border: 1px black solid;
  flex-grow: 1;
  aspect-ratio: 1;
  margin: 10px;
}

.content {
  display: flex;
  align-items: center;
}
    <div class="row">
  <div class="column">
      test title
  </div>

  <div class="column content">
    <div class="row2">
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    By default, a flex container will not expand its children to fill up the available space.

    You fix this by adding width: 100%; to your .row2 class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search