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!
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%;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments