Menu
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!
257
Flexbox is inherently a one dimensional layout model. Flex items within a flex container can be laid out either horizontally or vertically, but not both. If you want to lay out items in both dimensions, you'll need to nest a flex container inside another one.
Nested flex boxesIt's possible to create some pretty complex layouts with flexbox. It's perfectly OK to set a flex item to also be a flex container, so that its children are also laid out like flexible boxes.
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%;
}
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
