Menu
I am applying Flexbox concepts but there is something I am struggling with here, I applied display: flex; and applied the direction to be column.
Now as the main axis is column I made justify-content as space between but this space between is not applied to make space between navbar and section-main and footer.
.page-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.section-main {
display: flex;
flex-direction: row;
justify-content: space-between;
}<html>
<body>
<div class="page-container">
<div class="navbar">
<div class="brand">
Oka brand
</div>
<div class="nav-buttons">
nav buttons
</div>
</div>
<div class="section-main">
<div class="left-nav">
left nav
</div>
<div class="middle-section">
middle section
</div>
<div class="right-nav">
nav icons
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
808
The problem is that the flexbox container calculates the height based on available content. If you set the parent height to 100% it will adjust accordingly. Note that I added html, body to height: 100% in order to calculate full page height.
html,
body {
height: 100%;
}
* { /* Reset properties to avoid any browser related spacing */
margin: 0;
padding: 0;
}
.page-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%; /* Calculate from parent's height */
}
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.section-main {
display: flex;
flex-direction: row;
justify-content: space-between;
}<html>
<body>
<div class="page-container">
<div class="navbar">
<div class="brand">
Oka brand
</div>
<div class="nav-buttons">
nav buttons
</div>
</div>
<div class="section-main">
<div class="left-nav">
left nav
</div>
<div class="middle-section">
middle section
</div>
<div class="right-nav">
nav icons
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>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
