I'm having a problem with CSS flexbox. I had a working code yesterday yet today when I tested my solution it stopped working for some reason. It has to do with flexbox.
This is the result I want to have:
justify-content
. This failsflex-grow: 1
. This fails as well.flex-grow: 1
. This fails.It seems that whole flexbox stopped working correctly for me.
I believe the problem is that for some reason flexbox does not even respond correctly to this:
justify-content: flex-start;
If I try any other values there like center
, flex-end
, etc nothing happens.
Funny thing is that yesterday flexbox was behaving correctly, I could position it around with justify-content
and today I can't.
What am I missing here why is not at least justify-content: flex-end
or justify-content: center
doing behaving correctly and positioning the content?
If I fix the problem that causes justify-content
to stop working I believe flex-grow
will also work.
Does anyone have an idea why it's misbehaving?
I can get flex to behaving using this playground so I know my code should be working, My code above is exactly what I did here in the playground: https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
.ikigai {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.header, .footer {
height: 80px;
margin: 10px;
border: 1px dashed lightgray;
}
.content {
margin: 10px;
border: 1px dashed lightgray;
flex-grow: 1;
}
<div class="ikigai">
<div class="header">this is a header</div>
<div class="content">content</div>
<div class="footer">footer 12</div>
</div>
Your flex container has no height defined.
Therefore, it defaults to height: auto
(content-driven height).
Add this to your code:
.ikigai {
height: 100vh;
}
.ikigai {
display: flex;
flex-direction: column;
/* justify-content: flex-start; */ /* default value; not necessary */
height: 100vh;
}
.header, .footer {
height: 80px;
flex-shrink: 0; /* optional; if you don't want items to shrink vertically */
margin: 10px;
border: 1px dashed lightgray;
}
.content {
margin: 10px;
border: 1px dashed lightgray;
flex-grow: 1;
}
body {
margin: 0; /* override default margins; prevents vertical scrollbar */
}
<div class="ikigai">
<div class="header">this is a header</div>
<div class="content">content</div>
<div class="footer">footer 12</div>
</div>
More details: How to make div 100% height of the browser window?
justify-content
Note that justify-content
wasn't working in your code because there was no free space available. This property works by distributing free space in the container. In this case, because the container was defaulting to height: auto
, there was only enough space to accommodate the content.
justify-content
& flex-grow
Also note that even with a height
defined that creates extra space, justify-content
will not work if you use flex-grow
. Why? Because flex-grow
will consume that free space, again leaving no space for justify-content
to distribute.