I'm trying to set up a left meny where the li elements stretch to the entire height of the screen whatever the size of the screen.
I can't have the li elements filling the whole height of the screen with the css3 flex property. I've been looking at a good documentation here:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm working with a ul list of elements. Don't know if this is causing the problem ..
This is what I'm trying to do:
#left-drawer-menu {
width: 100%;
list-style-type: none;
margin: 0px;
padding: 0px;
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
#left-drawer-menu li{
background-color: white;
text-align: center;
min-height: 100px;
height: 20%;
}
<ul id="left-drawer-menu">
<li data-icon="contacts"><span class="km-icon km-mostrecent"></span>Available 1</li>
<li data-icon="globe"><span class="km-icon km-mostviewed"></span>Available 2</li>
<li data-icon="camera"><span class="km-icon km-organize"></span>Available 3</li>
<li data-icon="organize"><span class="km-icon km-featured"></span>Available 4</li>
<li data-icon="settings"><span class="km-icon km-action"></span>Available 5</li>
</ul>
Thanks for your help.
You need to :
a) set height 100% to all the elements chain, including the ul, the body and the html
b) set at least flex-grow to the elements
body, html {
height: 100%;
padding: 0px;
}
#left-drawer-menu {
width: 100%;
height: 90%;
list-style-type: none;
margin: 0px;
padding: 0px;
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
#left-drawer-menu li{
background-color: white;
text-align: center;
flex-grow: 1;
}
fiddle
Related
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 18 days ago.
I am trying to create a navbar / header, but I am having some trouble centering an h1-element.
This is my HTML:
body {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2%;
}
nav {
display: flex;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 10px;
}
h1 {
margin: 0;
text-align: center;
flex-grow: 1;
}
button {
display: inline-block;
}
<header>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<h1>SalonM</h1>
<button>Button</button>
</header>
To be clear, I do not want to center the h1-element relative to the header, I want to center it in regards to the screen.
Any ideas on how to fix this?
Try this:
body {
margin: 0;
padding: 0;
}
.nav-logo {
position: absolute;
display: flex;
justify-content: center;
width: 100%;
height: 100px;
align-items: center;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2%;
height: 100px;
}
nav {
display: flex;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 10px;
}
h1 {
margin: 0;
text-align: center;
flex-grow: 1;
}
button {
display: inline-block;
}
<header>
<div class="nav-logo">
<h1>SalonM</h1>
</div>
<div class="nav-wrapper">
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<button>Button</button>
</div>
</header>
If you put the H1 tag inside a Div tag, you will be able to center the div's content using "text-aling: center;" (The Div must have a defined width).
Because some of the words are too long, they get moved to a new line. If I decrease the font-size, the font becomes too small. I could target the elements with longer words and give them flex: 2 but then I lose the symmetry.
.wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
.navigation {
height: 55px;
width: 100%;
}
.navUl {
display: flex;
list-style-type: none;
align-items: center;
justify-content: center;
padding-top: 8px;
}
.navUl li {
flex: 1;
margin-right: 10px;
}
<div class="navigation">
<div class="wrapper">
<ul class='navUl'>
<li>HOME</li>
<li>ÜBER UNS</li>
<li>UNSERE LEISTUNGEN</li>
<li>PREISZUSAMMENSETZUNG</li>
<li>NÜTZLICHES</li>
<li>GALERIE</li>
<li>VIDEOS</li>
<li>BAUMSCHUTZGESETZ</li>
</ul>
</div>
</div>
Based on your example, the size limit on .wrapper(960px) is too small to fit all your list one one line.
You can use white-space:nowrap but this will not keep symmetry and the list will overflow the wrapper.
The best option would be to modify the .wrapper to give it more width (around 1500px should do it), or live with the fact your items break on two lines.
.wrapper {
width: 1500px;
height: 100%;
margin: 0 auto;
}
.navigation {
height: 55px;
width: 100%;
}
.navUl {
display: flex;
list-style-type: none;
align-items: center;
justify-content: center;
padding-top: 8px;
}
.navUl li {
flex: 1;
margin-right: 10px;
}
<div class="navigation">
<div class="wrapper">
<ul class='navUl'>
<li>HOME</li>
<li>ÜBER UNS</li>
<li>UNSERE LEISTUNGEN</li>
<li>PREISZUSAMMENSETZUNG</li>
<li>NÜTZLICHES</li>
<li>GALERIE</li>
<li>VIDEOS</li>
<li>BAUMSCHUTZGESETZ</li>
</ul>
</div>
</div>
I want to build a navigation in the header containing three items where the first two ones are aligned left and the third one is aligned right. Tried it by use of flexbox but there is an arror: The ul is exceeding the width of it's parent container.
header {
width: 100%;
background: #417690;
margin-left: 10px;
margin-right: 10px;
font-size: 20px;
height: 70px;
}
header ul {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: center; */
}
header ul li {
display: inline-block;
padding-right: 15px;
margin-left: 10px;
}
.filler {
flex-grow: 1;
}
<header>
<ul>
<li>Logo</li>
<li>New article</li>
<li class="filler"></li>
<li>username</li>
</ul>
</header>
How can I fix this?
Tested in FF and Opera.
Reset margin to zero and add box-sizing: border-box to all elements to include the padding in the size calculations. You may also reset the padding for the ul element - see demo below:
* { /* ADDED */
box-sizing: border-box;
}
header {
width: 100%;
background: #417690;
/*margin-left: 10px;
margin-right: 10px;*/
font-size: 20px;
height: 70px;
}
header ul {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: center; */
padding: 0; /* ADDED */
}
header ul li {
display: inline-block;
padding-right: 15px;
margin-left: 10px;
}
.filler {
flex-grow: 1;
}
<header>
<ul>
<li>Logo</li>
<li>New article</li>
<li class="filler"></li>
<li>username</li>
</ul>
</header>
Try this:
header ul {
box-sizing: border-box;
padding: 0;
}
here's what I have Fiddle
ul {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
width: 100%;
height: 100px;
background: #333;
padding: 15px;
}
ul li {
padding: 15px;
margin: 5px;
background: #efefef;
border: 1px solid #ccc;
display: inline-block;
list-style: none;
}
#item-1 {
height: 50px;
}
#item-2 {
height: 70px;
}
<ul>
<li id="item-1">Home</li>
<li id="item-2">Menu</li>
<li>More</li>
<li>Stuff</li>
<li>Settings</li>
</ul>
I want the last item inside the flex-box to be pulled to the right ("Settings" in my fiddle) while keeping all other items the way they are. The "Settings"-item should also be centered vertically and everything.
align-self: flex-end pushes the item to the bottom (I want it on the right).
I would very much prefer a solution using flex-box because my items have variable heights and should always be centered vertically.
What is the cleanest way to achieve this?
Thanks for your help!
Simple fix, use an auto-adjusting margin:
ul li:last-child {
margin-left: auto;
}
You may also want to not use width: 100% so that the element stays inside the visible area:
ul {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
/* width: 100%; */
height: 100px;
background: #333;
padding: 15px;
}
http://jsfiddle.net/dwLHE/
See also https://www.w3.org/TR/css-flexbox-1/#auto-margins
I have container with fixed height and display: flex. I want it's children to be laid in a column-first manner by setting -webkit-flex-flow: column wrap;.
http://jsfiddle.net/wNtqF/1/
Can anyone explain me how chrome calculates the resulting width of the container div (div with green border) and why is leaves so much free space on the right of each red item. What I want is to have the container to have width just to fit all children, without the additional empty space.
If it's not possible with pure css can you provide me an alternative to achive this?
I'm using Chrome v 29.0.1547.76
The code to reproduce it is:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
position: fixed;
height: 90%;
padding: 0;
margin: 0;
list-style: none;
border: 6px solid green;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
justify-content: flex-start
align-content: flex-start;
align-items: flex-start
}
/** Just to show the elements */
body {
margin: 0;
padding: 0;
}
.flex-item {
background: tomato;
padding: 5px;
width: 100px;
height: 100px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
</body>
Chrome automatically puts the space between the div and the border top, to fix this, you can just use:
margin-bottom: 100%;
Why this? margin-bottom: 100% reset the element and move the item up.
You've tried with:
body {
margin: 0;
padding: 0;
}
But this didn't work because body sposte the page html and not single element.
The complete code will are here:
.flex-container {
position: fixed;
height: 90%;
padding: 0;
margin: 0;
list-style: none;
border: 6px solid green;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
justify-content: flex-start
align-content: flex-start;
align-items: flex-start
}
/** Just to show the elements */
body {
margin: 0;
padding: 0;
}
.flex-item {
background: tomato;
padding: 5px;
width: 100px;
height: 100px;
margin-bottom: 100%;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>