In a flex container, not able to align the items towards the flex-axis (when the flex-direction is column).
Please refer the code snippet below.
I would expect the result with the items aligned from the bottom (justify-content: flex-end supposed to be in effect) .
But the items are displayed as if justify-content: flex-start is in effect.
Any idea where I am erring?
Taking hint from #Temani Afif's comment I could fix it.
I have to make sure the container height is 100%. Also height of the html and body elements are also 100%.
html, body{
height: 100%;
}
html, body {
height: 100%;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
height: 100%;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.flex-end li {
background: gold;
}
.center {
justify-content: center;
}
.center li {
background: deepskyblue;
}
.space-between {
justify-content: space-between;
}
.space-between li {
background: lightgreen;
}
.space-around {
justify-content: space-around;
}
.space-around li {
background: hotpink;
}
.space-evenly {
justify-content: space-evenly;
}
.space-evenly li {
background: #bada55;
}
.flex-item {
background: tomato;
padding: 5px;
width: 35px;
height: 25px;
margin: 5px;
line-height: 25px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<ul class="flex-container flex-end">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
</ul>
Related
I am working on a project which requires some basic HTML/CSS. I have a code pen which may be easier to visualize: https://codepen.io/Sean713/pen/yLEZVEe
My objective is to make the innerBottomHalf element expand to fully fill the bottomHalf element (barring any padding). I would also like the navbar + wholePage element to take up the full VH.
I currently have it set so that the wholePage takes up the full VH, I'm not sure how to subtract the navbar height from this.
I also see that my innerBottomHalf expands outside of my BottomHalf, I do not know why this is, because I've set its height to be 100%.
I tried a lot of solutions online, the GPT chatbot, and prodding around with the code, but have been unable to figure it out. I appreciate any help.
My code is as follows:
ul {
list-style-type: none;
display: flex;
align-items: center;
}
li a {
display: block;
text-align: center;
padding: 10px 15px;
text-decoration: none;
}
div {
padding: 10px;
}
.wholePage {
background-color: blue;
display: flex;
flex-direction: column;
height: 100vh;
}
.topHalf {
background-color: purple;
display: flex;
justify-content: space-between;
}
.bottomHalf {
background-color: grey;
height: 100%;
}
.innerBottomHalf {
background-color: brown;
height: 100%;
}
.topLeftHalf {
background-color: green;
flex: 1;
height: 50vh;
}
.topRightHalf {
background-color: orange;
flex: 1;
height: 50vh;
}
<ul>
<li><a>Solve</a></li>
<li><a>About</a></li>
<li><a>Other</a></li>
</ul>
<div class="wholePage">
<div class="topHalf">
<div class="topLeftHalf">
This is the top left
</div>
<div class="topRightHalf">
This is the top right
</div>
</div>
<div class="bottomHalf">
This is the bottom half
<div class="innerBottomHalf">
This is the inner bottom half
</div>
</div>
</div>
With height: 100% on nested elements you'll get an overflow because there are heights from other elements being added. Instead of percentage heights, just use flex properties all the way.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0; /* remove default margins */
}
.wholePage {
background-color: blue;
display: flex;
flex-direction: column;
/* height: 100vh; */
flex: 1; /* new */
}
.bottomHalf {
background-color: grey;
/* height: 100%; */
display: flex;
flex-direction: column;
flex: 1;
}
.innerBottomHalf {
background-color: brown;
/* height: 100%; */
flex: 1;
}
/* no adjustments below this line */
ul {
list-style-type: none;
display: flex;
align-items: center;
}
li a {
display: block;
text-align: center;
padding: 10px 15px;
text-decoration: none;
}
div {
padding: 10px;
}
.topHalf {
background-color: purple;
display: flex;
justify-content: space-between;
}
.topLeftHalf {
background-color: green;
flex: 1;
height: 50vh;
}
.topRightHalf {
background-color: orange;
flex: 1;
height: 50vh;
}
<ul>
<li><a>Solve</a></li>
<li><a>About</a></li>
<li><a>Other</a></li>
</ul>
<div class="wholePage">
<div class="topHalf">
<div class="topLeftHalf">
This is the top left
</div>
<div class="topRightHalf">
This is the top right
</div>
</div>
<div class="bottomHalf">
This is the bottom half
<div class="innerBottomHalf">
This is the inner bottom half
</div>
</div>
</div>
I'm having some problems creating a header.
Here, my ul is not using the full height of the nav, but the nav IS using the full height of the header.
I want to fix this in order to center vertically the text.
Thank you.
(edit) When I use height: 100%; on the ul, this happens.
This is my HTML:
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORKS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
This is my SASS:
$BLACK:#000;
$WHITE:#fff;
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
li {
display: inline-block;
margin-left:50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
Here is a solution for this. Just add line-height: 75px; to the li elements and set the ul element's margin to zero by adding margin: 0px;.
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: #000;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
header .logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
header nav {
width: 50%;
padding-right: 50px;
}
header nav ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
margin: 0px;
}
header nav ul li {
display: inline-block;
margin-left: 50px;
line-height: 75px;
}
header nav ul li a {
text-decoration: none;
color: #fff;
}
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORKS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
However I converted your SASS code into CSS to run it on the stack overflow code snippet runner. You can change this to SASS again if you want.
Thanks and best regards!
Its probably because you did not reset the margin for the ul tag and also apply a 100% percent height to it also.
$BLACK: #000;
$WHITE: #fff;
* {
box-sizing: border-box;
// margin: 0;
// padding: 0;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
background: red;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
background: orange;
height: 100%;
li {
display: inline-block;
margin-left: 50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
<header>
<div class="logo">
<img src="https://via.placeholder.com/20x20.png/09f/fff" />
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORKS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
Please update your css with following code:
$BLACK:#000;
$WHITE:#fff;
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
height: 100%;
display: flex;
align-items: center;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
flex: 1 0 auto;
align-self: stretch;
align-items: center;
li {
display: inline-block;
margin-left:50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
i have the following code
header {
width: 100%;
height: 65px;
background: #fff;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
color: #252c3a;
}
#menu {
width: 100%;
display: flex;
margin-left: 28%;
}
#menu div {
width: 100px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
<header>
<div id="logo">
<img src="img/header/logo.png" alt="Logo">
</div>
<div id="menu">
<div>Home</div>
<div>Club-Life</div>
<div>Training</div>
<div>Instructors</div>
<div>Contact</div>
</div>
Chrome inspect
The width of the other blocks is 100%, but the header width gets bigger than the block below. I use justify-content: space-between.
Remove width & margin
Add flex-wrap on the header
header {
width: 100%;
height: 65px;
background: #fff;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
color: #252c3a;
flex-wrap:wrap;
}
#menu {
display: flex;
flex-wrap:wrap;
}
There are few things we need to do:
In header:
1. Remove width
In #main:
1. Remove width
2. Remove margin
In #menu div:
1. Remove everything and just add margin left
Demo: https://codepen.io/Bibeva/pen/povddJr
Final code:
header {
height: 65px;
background: #fff;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
color: #252c3a;
}
#menu {
display: flex;
}
#menu div {
margin: 0 0 0 30px;
}
#menu {
display: flex;
}
that's all , Can you try this ?
I've been trying to make a navbar but I haven't quite been succesful. The navbar div has a height of 60px, however, I can't seem to be able to increase the height of the inside elements in any way. (except padding) What am I doing wrong?
What I'm getting
What I'm trying to get
#navbar {
width: 100vw;
height: 60px;
background: #deff00;
box-shadow: 0 0 50px black;
z-index: 2;
position: relative;
top: 85px;
}
#navbar ul {
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.navbar-link {
text-decoration: none;
color: black;
height: 60px;
padding: 0 20px;
}
.navbar-link:hover {
background: #adc703;
}
<div id="navbar">
<ul>
<li>
<a href="#" style="font-weight: bold;" class="navbar-link"
>ÚVODNÍ STRÁNKA</a
>
</li>
<li>
ŠKOLA
</li>
<li>STUDIUM</li>
<li>FOTOGALERIE</li>
<li>KONTAKT</li>
</ul>
</div>
Thanks!
Try this:
#navbar {
width: 100vw;
height: 60px;
background: #deff00;
box-shadow: 0 0 50px black;
z-index: 2;
position: relative;
top: 85px;
}
#navbar ul {
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#navbar li {
display: table;
}
.navbar-link {
text-decoration: none;
color: black;
height: 60px;
padding: 0 20px;
vertical-align: middle;
display: table-cell;
}
.navbar-link:hover {
background: #adc703;
}
Just added display: table; for the li, and vertical-align: middle;display: table-cell for the a tag, sometimes this old technics fit perfect)
Codepen: https://codepen.io/Liveindream/pen/mdyXmxj?editors=1100
If I'm understanding this question correctly, you want to raise the elements in height. The thing that is constricting you from doing that is inside of your CSS
#navbar ul {
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
Remove align-items: center; from #navbar ul
So that it looks like this:
#navbar ul {
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
Now you should be able to increase and/or decrease it in height to correctly align it onto your div tag the way you'd like.
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