I'd like to move my <h1> element in flex-start direction, so I used align-self to override the initial direction, but didn't work.
HTML:
<div class="container">
<h1>Logo</h1>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
CSS:
.container {
background: deepskyblue;
display: flex;
justify-content: flex-end;
flex-direction: row;
}
.container h1 {
align-self: flex-start;
}
.navigation {
display: flex;
list-style: none;
}
.navigation a {
color: white;
padding: 1rem;
text-decoration: none;
display: inline-block;
}
.navigation a:hover {
background-color: red;
}
CodePen
If you want the <h1> aligned at start you want to set the justify-content property of its' parent to space-between. You don't need align-self on <h1>:
.container {
background: deepskyblue;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.container h1 {
color: white;
}
Updated pen.
Related
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;
}
}
}
}
}
Phenomena
img tags and nav tags are not justified.
Expected value
I want to be both ends aligned the img and nav tags.
Steps to reproduce
Run the code below, please.
.header {
.header__wrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 960px;
height: 60px;
padding: 0px 76.1095px;
margin: 0px 471.5px;
justify-content: space-evenly;
img {
/* omitted */
}
nav {
/* omitted */
.header__nav-link {
/* omitted */
}
}
.header__nav-li_bicycle {
list-style: none;
width: 74.695px;
.header__nav-link_bicycle {
/* omitted */
}
}
}
}
}
<header class="header">
<div class="header__wrapper">
<img class="header__profile-icon" src="image/logo.svg" alt="プロフィール">
<nav class="header__nav">
<li class="header__nav-li">About</li>
<li class="header__nav-li_bicycle">Bicycle</li>
</nav>
</div>
</header>
You can try using the following pure CSS to achieve your desired result. I added a few flex-boxes and aligned the items so they are space roughly the same as your image. See the CSS changes below.
.header {
display: flex;
flex-direction: row;
align-items: center;
width: 960px;
justify-content: space-evenly;
width: 100%;
}
li {
list-style-type: none;
}
ul {
display: flex;
gap: 20px;
}
.header__wrapper {
display: flex;
align-items: center;
gap: 30vw;
}
<header class="header">
<div class="header__wrapper">
<img class="header__profile-icon" src="image/logo.svg" alt="プロフィール">
<nav class="header__nav">
<ul>
<li class="header__nav-li">About</li>
<li class="header__nav-li_bicycle">Bicycle</li>
</ul>
</nav>
</div>
How would I move the GSS from on top of the three links to the same line on the left side with a large space in between the two divs?
.gssnav {
display: flex;
flex-direction: row;
justify-content: center;
}
.nav-padding {
margin-top: 30px;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 30px;
}
.navlink {
cursor: pointer;
color: #000000;
border: transparent;
}
.navlink:hover {
cursor: pointer;
color: #ffffff;
border: primary;
transition-duration: 500ms;
}
<div>
<header class="nav-padding">
<div>
<nav>
<div class="gssnav">
GSS
</div>
<div class="navbar">
Home
Projects
<a onclick="smoothScrollTo('Links')" class="navlink">Links</a>
</div>
</nav>
</div>
</header>
</div>
Flex layout rules go on the parent element, and you'd use justify-content: space-between to spread things. See https://css-tricks.com/snippets/css/a-guide-to-flexbox.
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.nav-padding {
margin-top: 30px;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 30px;
}
.navlink {
cursor: pointer;
color: #000000;
border: transparent;
}
.navlink:hover {
cursor: pointer;
color: #ffffff;
border: primary;
transition-duration: 500ms;
}
<div>
<header class="nav-padding">
<div>
<nav>
<div class="gssnav">
GSS
</div>
<div class="navbar">
Home
Projects
<a onclick="smoothScrollTo('Links')" class="navlink">Links</a>
</div>
</nav>
</div>
</header>
</div>
you should use flexbox or css grid for this type of alignment... you can also use floats but i feel that flexbox or grid is much better...
/* edit */
nav{
display: flex;
justify-content: center;
align-items: center;
column-gap: x rem;
}
just replace x with the amount of space you want between the GSS and the links
You can assign style to nav to reach that
nav {
display: flex;
align-items: center;
justify-content: center;
}
.gssnav {
display: flex;
flex-direction: row;
justify-content: center;
margin-right: 10px;
}
nav {
display: flex;
align-items: center;
justify-content: center;
}
.nav-padding {
margin-top: 30px;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 30px;
}
.navlink {
cursor: pointer;
color: #000000;
border: transparent;
}
.navlink:hover {
cursor: pointer;
color: #ffffff;
border: primary;
transition-duration: 500ms;
}
<div>
<header class="nav-padding">
<div>
<nav>
<div class="gssnav">
GSS
</div>
<div class="navbar">
Home
Projects
<a onclick="smoothScrollTo('Links')" class="navlink">Links</a>
</div>
</nav>
</div>
</header>
</div>
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>
I'm trying to create this top header using flexbox.
Basically I would like to center the <div class="header-title"> (Institution institution 1) on the line with the 3 other elements you see. (Institutioner, Ledere and Log ud) like you see on the image.
.nav {
background: #e1e1e1;
}
ol, ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.header-title {
justify-content: center;
align-self: center;
display: flex;
}
.nav ul li.logout {
margin-left: auto;
}
.nav ul li a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div class="header-title">
Institution institution 1
</div>
<ul>
<li>Institutioner</li>
<li>
Ledere
</li>
<li class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</li>
</ul>
</div>
Demo - JSFiddle
Use nested flex containers and flex-grow: 1.
This allows you to create three equal-width sections on the nav bar.
Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.
Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).
.nav {
display: flex;
height: 50px; /* optional; just for demo */
background: white;
}
.links {
flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
display: flex;
justify-content: flex-start;
align-items: center;
border: 1px dashed red;
}
.header-title {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed red;
}
.logout {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px dashed red;
}
.links a {
margin: 0 5px;
text-decoration: none;
}
<div class="nav mobilenav">
<div class="links">
Institutioner
Ledere
</div>
<div class="header-title">Institution institution 1</div>
<div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>
jsFiddle
Use justify-content: space-between; like this:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Css grid will do this better than flexbox.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
button {
display: inline-block;
}
.short-content {
margin-left: auto;
}
<div class="grid">
<div class="long-content">
This has content that is fairly long
</div>
<button>CTA Button</button>
<div class="short-content">
Small Text
</div>
</div>
Here is a Flex solution that aligns the right and left containers while centering the middle container correctly.
.header-box {
width: 100%;
display: flex;
flex-flow: row wrap;
padding-top: 50px;
}
.left-header, .center-header, .right-header {
flex: 100px; /* adjust width if needed */
}
.header-box div:nth-of-type(1) {
text-align: left;
}
.header-box div:nth-of-type(2) {
align-self: center;
text-align: center;
}
.header-box div:nth-of-type(3) {
text-align: right;
}
<div class="header-box">
<div class="left-header">Left<br>header<br>content</div>
<div class="center-header">Center<br>header<br>content</div>
<div class="right-header">Right<br>header<br>content</div>
</div>
If you are open to changing your html, you need to put all the items in your header on the same level in the DOM.
Here's a working example
.nav {
background: #e1e1e1;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.nav > div {
min-width: 0;
white-space: nowrap;
}
.header-title {
flex-basis: 80%;
text-align: center;
}
.nav div a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div>Institutioner</div>
<div>Ledere</div>
<div class="header-title">
Institution institution 1
</div>
<div class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</div>
</div>