CODEWITHSUNDEEP
htmlcssflexbox
Raphael Kleindienst
Raphael Kleindienst

Reputation: 317

CSS: Flexbox within Flexbox

I was playing around with the flexboxes a little and wanted to combine a column and row container. The question I have is:

Why do the row elements placed within the column not span the entire width of the flex-container?

The example code is shown here: js-fiddle

HTML:

/* CSS: */

.flex-container {
  color: blue;
  background-color:yellow;
  text-decoration: bold;
  text-size: 1em;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.horizontal {
  flex-direction:row;
  background-color: red;
}

.vertical {
  flex-direction:column;
}
<body>
  <div class="flex-container vertical">
  <div class=flex-item>1 </div>
  <div class=flex-item>2 </div>
  <div class="flex-container horizontal" >
    <div class=flex-item>3a </div>
    <div class=flex-item>3b </div>
    <div class=flex-item>3c </div>
  </div>
  <div class=flex-item>4 </div>
  <div class=flex-item>5 </div>
  </div>
</body>

Thanks for any help!

Upvotes: 16

Views: 26095

Answers (3)

Razvan Zamfir
Razvan Zamfir

Reputation: 4684

Adding width: 100% to your horizontal flexbox and flex: 1 to the items within it I got this:

   body {
     background-color: black
   }

   .flex-container {
     color: blue;
     background-color: yellow;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   .horizontal {
     flex-direction: row;
     background-color: red;
     width: 100%; /*this line was added*/
   }
   
   /*these lines*/
   .horizontal .flex-item {
     flex: 1;
   }
   /*ware added*/

   .vertical {
     flex-direction: column;
   }

   .flex-item {
     background: tomato;
     padding: 5px;
     width: 100px;
     height: 75px;
     margin: 5px;
     line-height: 75px;
     color: white;
     font-size: 3em;
     text-align: center;
   }
<body>
  <div class="flex-container vertical">
    <div class="flex-item">1 </div>
    <div class="flex-item">2 </div>
    <div class="flex-container horizontal">
      <div class="flex-item">3a</div>
      <div class="flex-item">3b</div>
      <div class="flex-item">3c</div>
    </div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
  </div>
</body>

Upvotes: 0

roberrrt-s
roberrrt-s

Reputation: 8210

This is because of the way Flexbox works.

Since the .horizontal container is a flex child itself, it automatically adjusts to the size of the other children. Only allowing space for the overflowing content, which are the children of the .horizontal itself.

Manually applying the width will result in the space being created for the items, and the justify-content: space-between will kick in.

Solution, change the following rule:

.horizontal {
    flex-direction: row;
    background-color: red;
    width: 100%;
}

Upvotes: 15

Danield
Danield

Reputation: 125561

Since you have set align-items:center; on the flex container, in addition to being centered - the items also only take up the minimum amount of space that they need.

If you hadn't set this property - then the default value of stretch would have kicked in and the items would take up the full width.

Then, like @Michael_B pointed out you could apply align-self:center on the flex items to center the items on the cross axis. 

.flex-container {
  color: blue;
  background-color: yellow;
  text-decoration: bold;
  text-size: 1em;
  display: flex;
  justify-content: space-between;
}

.horizontal {
  flex-direction: row;
  background-color: red;
}

.vertical {
  flex-direction: column;
}

.flex-item {
  align-self: center;
  /* center each flex item along the cross axis */
  text-align: center;
  /* horizontally center content within flex item */
}
<body>
  <div class="flex-container vertical">
    <div class=flex-item>1 </div>
    <div class=flex-item>2 </div>
    <div class="flex-container horizontal">
      <div class=flex-item>3a </div>
      <div class=flex-item>3b </div>
      <div class=flex-item>3c </div>
    </div>
    <div class=flex-item>4 </div>
    <div class=flex-item>5 </div>
  </div>
</body>

Upvotes: 3

Related Questions