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:
- To be able to position the content with
justify-content. This fails - Content should take all the available space so it has
flex-grow: 1. This fails as well. - The footer should be at the bottom since the content would push it down by taking all the available space thanks to
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>