Creating a Sidebar within a flexbox with CSS
You can set the height and width in a flexible way.
- Height is set to 100% of the height of the viewport minus the height of the header.
- Width is set to 100px for the sidebar. The content is now allowed to grow to fill the rest of the screen.
Hope this helps.
html { height: 100%;}
body { height: 100%; margin: 0; font-family: Ubuntu; background: linear-gradient(#b3ffab, #67fffc);}
#header { height: 30px; display: flex; align-items: center; background: linear-gradient(#444444, #333333); color: #bbbbbb;}
#headerContent { margin-left: 10px;}
#page { display: flex; height: calc( 100vh - 30px); /* calculate the height. Header is 30px */}
#sideBar { width: 100px; background: red;}
#content { background: blue; flex: 1 0 auto; /* enable grow, disable shrink */}<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu" />
<div id="header"> <div id="headerContent"> Desktop </div></div>
<div id="page"> <div id="sideBar"> <div> box 1 </div> <div> box 2 </div> </div> <div id="content"> content </div></div>How to create a sidebar and content area using flexbox?
You just need to use min-height instead of height
html, body {
margin: 0;
height: 100%;
}
body {
height: 100%;
}
.flex-container {
display: -webkit-flex;
display: flex;
background-color: red;
min-height: 100%;
}
html,body { margin: 0; height: 100%;}body { height: 100%;}.flex-container { display: -webkit-flex; display: flex; background-color: red; min-height: 100%;}.sidenav { background-color: lightgray; -webkit-flex: 1; flex: 1;}.content { background-color: lightblue; padding: 10px; -webkit-flex: 5; flex: 5; height: 2000px;}<body> <div class="flex-container"> <div class="sidenav"> <ul> <li>Item 1</li> </ul> </div> <div class="content"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div> </div></body>How to align Items at the top and on the bottom in a Sidebar with flexbox?
To get what you want, apply margin-top: auto; to the first element that should be part of the "bottom-group", and leave the justify-content setting of the flex container at its default (i.e. no definition for that setting). Also, you need to define a height for the flex container, otherwise it will only have the added height of all its children by default (I made it 100vh, i.e. full viewport height, but adjust that as needed):
(note: view the snippet in full page view, otherwise it's not high enough to show the desired result)
html, body {
margin: 0;
}
.sidebarleft {
background-color: rgb(25, 20, 26);
display: flex;
flex-direction: column;
flex: 0 0 50px;
height: 100vh;
}
.sidebarleft-button {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
border: none;
background-color: inherit;
color: rgb(100, 110, 122);
}
.sidebarleft-button:nth-child(4) {
margin-top: auto;
}<div class="sidebarleft">
<button class="sidebarleft-button">A</button>
<button class="sidebarleft-button">B</button>
<button class="sidebarleft-button">C</button>
<button class="sidebarleft-button">Y</button>
<!-- this Item should be on the bottom -->
<button class="sidebarleft-button">Z</button>
<!-- this Item should be on the bottom -->
</div>Sidebar with two flexbox navs top and bottom
There are probably other ways to do this. In short I did the following:
- Wrap your elements with a parent that is able to grow in size (
.sidebar__wrapper) - Set the
min-heightinstead ofheightso it can grow - Use
flex-growif you want an element to fill out the remaining space.
html, body { margin: 0;}
* { box-sizing: border-box;}
.sidebar { height: 100vh; width: 300px; background: #ccc; overflow-y: scroll; margin: 0; padding: 0;}
/* set up a wrapper that can grow in size */.sidebar__wrapper { height: auto; min-height: 100vh; width: 100%; background: #808080; padding: 10px; margin: 0; display: flex; flex-direction: column; justify-content: space-between;}
.sidebar__top { background: red; min-height: 200px; margin-bottom: 10px; /* this fills up the remaining space */ flex-grow: 1;}
.sidebar__bottom { background: blue; min-height: 100px;}<aside class="sidebar"> <div class="sidebar__wrapper"> <nav class="sidebar__top" contenteditable="true"> <p>test</p> </nav> <nav class="sidebar__bottom"></nav> </div></aside>Left align content using flexbox in a sidebar
You should not embed the the <span> tag inside the <i> tag because when you was applying style on .nav-link the span tag treated like the child of <i> tag
.title {
display: inline-block;
}
/*Main Container (body)*/
.main-container {
font-family: Roboto, Arial;
margin: 0;
padding: 0;
background-color: #fff;
}
header .title {
margin: 5% 5%;
}
main {
margin: 1% 3%;
}
/*Categories*/
.home-categories {
display: inline-block;
text-align: center;
padding: 2% 0;
margin-bottom: 5%;
width: 100%;
}
.home-categories-img {
width: 95%;
}
.navbar {
position: fixed;
background-color: #525252;
transition: width 600ms ease;
overflow: auto;
bottom: 0;
height: 3rem;
width: 100vw;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
text-decoration: none;
justify-content: center;
font-size: 200%;
}
.link-text {
font-family: Roboto, Arial;
display: none;
margin-left: 1rem;
}
footer {
padding: 5%;
}
/*LARGE SCREEN VIEW*/
@media screen and (min-width: 748px) {
header .title {
margin: 2% 5%;
margin-left: 10%;
}
/*Content Container (main)*/
.main-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 1% 5%;
margin-left: 10%;
}
/*Categories*/
.home-categories {
flex: 0 1 48%;
margin: 0 1% 5% 1%;
}
.home-categories:nth-child(even) {
margin-top: 15%;
margin-bottom: 0;
}
.home-categories:nth-child(odd) {
margin-bottom: 15%;
}
.navbar {
top: 0;
width: 4rem;
height: 100%;
}
.navbar-nav {
flex-direction: column;
height: 100%;
justify-content: space-evenly;
}
.navbar:hover {
width: 16rem;
}
.navbar:hover .link-text {
display: inline;
}
footer {
margin-left: 4rem;
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body class="main-container">
<header>
<a href="index.html">
<h1 class="title">page name</h1>
</a>
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="" class="nav-link">
<i class="fa fa-home fa-fw" aria-hidden="true"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fa fa-address-card fa-fw" aria-hidden="true"></i>
<span class="link-text">About</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i>
<span class="link-text">Contact</span>
</a>
</li>
</ul>
</nav>
</header>
<main class="main-wrapper">
<article class="home-categories">
<a href="">
<img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Website image">
<h2>Websites</h2>
</a>
</article>
<article class="home-categories">
<a href="">
<img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Games image">
<h2>Games</h2>
</a>
</article>
<article class="home-categories">
<a href="">
<img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Apps image">
<h2>Apps</h2>
</a>
</article>
<article class="home-categories">
<a href="">
<img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Art image">
<h2>Art</h2>
</a>
</article>
</main>
<footer>
<p><a href="">mail</a></p>
<p><a href="">Link</a></p>
</footer>Forcing sidebar scroll using flexbox layout
Add overflow-y: auto;, this will solve your problem.
Fixed position sidebar within a flex container
You can use position: sticky;. It respects the flex and has a fixed purpose.
DEMO:
.container {
width: 1000px;
margin: auto;
border: 1px solid black;
}
.content {
display: flex;
justify-content: space-between;
}
.left-content {
height: 1000px;
width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 20%;
background-color: yellow;
position: -webkit-sticky;
position: sticky;
top: 0;
}<div class="container">
<div class="content">
<div class="left-content">
left content
</div>
<div class="right-sidebar">
right sidebar
</div>
</div>
</div>Flexbox layout, push content when opening sidebar?
You are so close.
In order to make the content column grow when the right sidebar is hidden, you need a positive flex-grow on it.
And in order to make the body cover all the screen, remove its margin and use height: 100% on both html and body.
Here is a working example:
document.querySelector('button').addEventListener('click', function() { document.getElementById('right').classList.toggle('hidden');});html, body { margin: 0; height: 100%;}body { display: flex; flex-flow: row nowrap;}.sidebar { width: 25%; background: #777;}#content { flex-grow: 1; background: #000;}.hidden { display: none;}<div id="left" class="sidebar"></div><div id="content"> <button type="button">Toggle sidebar</button></div><div id="right" class="sidebar hidden"></div>How to make a fixed width sidebar align with the flexible content using flexbox
try, .items{justify-content: space-around;}.
It will evenly space the items from each other and edge of parent container.
http://codepen.io/chiranjeeb/pen/ouhFD
Note:
it may appear you have more space before sidebar, thats extra space added by .sidebar {margin-left: 3.7%;}
similarly, the space between two consecutive items appears twice more than space between edge. its the right and left space both items added. Its only visible if you have more than one column of items.
Related Topics
Less CSS - Accessing Classes Further Up the Dom Tree from Within a Nested Class
CSS Mystery: Width Being Set to 0Px Without Any CSS Rules
Why an Inline-Block Container Doesn't Collapse When Contains Only Floated Items
Select Element Without a Child
Gradient Servers as External Files in Svg
Is There a Specific Order for CSS Properties
How to Add Additional Information to an Attribute Selector via Nesting in SASS
How to Get Scale Works Cross-Browser in Center Position on Svg Elements with CSS
Padding Within Inputs Breaks Width 100%
Can Someone Recommend a Bells and Whistles CSS Framework
CSS Transform + CSS Transition = Skipped Frames [Google Chrome]
Inside Transparent Arrow on the Left
How to Disable Anti-Aliasing in CSS When Using @Font-Face with Pixel Fonts
When and How Do Browsers Render <Style> Tag in <Body>
Applying CSS on Drawn Canvas Elements
Css: Element Has 'Display: Block' and Doesn't Start a New Line