I was wondering how I could create even spacing in my navbar. I want to have even spacing between the "History, Etymology, and About." I also want that part to stay on the right, while the Shiba Inu stays on the left. I have attached a picture of what I have currently and also a picture of what I would like.
Thank you!
What I want
What I have
.navbar{
font-size: 13pt;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
position: fixed;
}
.main-nav{
list-style-type: none;
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.home,
.nav-links{
text-decoration: none;
color:#212020;
}
.main-nav li{
display: flex;
flex-flow: row wrap;
margin: 0;
justify-content: space-between;
font-size: 13pt;
}
.home{
display: inline-block;
font-size: 22px;
margin-left: 10px;
}
<nav class="navbar">
SHIBA INU
<ul class="main-nav">
<li>
<a href="index.html" class="nav-links" >ABOUT</a>
</li>
<li>
<a href="#" class="nav-links" >ETYMOLOGY</a>
</li>
<li>
<a href="#" class="nav-links" >HISTORY</a>
</li>
</ul>
</nav>
In summary:
Make sure your flex parent or flex container have a width
defined of the parent in this case 100% means the full window as
there is no other parent here.
On the other hand the space between elements of the list can be done
with multiple approaches but I think a margin that excludes the last
one should work for your use case.
.navbar{
font-size: 13pt;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
position: fixed;
width: 100%;
}
.main-nav{
list-style-type: none;
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
flex-grow: 1;
align-items: justify-content;
}
.home,
.nav-links{
text-decoration: none;
color:#212020;
}
.main-nav li{
display: flex;
flex-flow: row wrap;
margin: 0;
justify-content: space-between;
font-size: 13pt;
}
.main-nav li:not(:last-child) {
margin-right: 10px;
}
.home{
display: inline-block;
font-size: 22px;
margin-left: 10px;
}
<nav class="navbar">
SHIBA INU
<ul class="main-nav">
<li>
<a href="index.html" class="nav-links" >ABOUT</a>
</li>
<li>
<a href="#" class="nav-links" >ETYMOLOGY</a>
</li>
<li>
<a href="#" class="nav-links" >HISTORY</a>
</li>
</ul>
</nav>
Related
is it possible to wrap text in flex within a fixed width container?
so it looks like
img username added
you as a friend
rather than
user added
img name you as
a
friend
I can do this if the image and a were separate, but since they both link to the same thing, I wanna see if it can be done in the same tag.
ul {
width: 150px;
height: 300px;
border: solid 1px #000;
}
li {
display: flex;
align-items: center;
justify-content: center;
}
li img {
width: 25px;
height: 25px;
}
li a {
display: flex;
align-items: center;
text-decoration: none;
}
li span {
margin: 0 8px;
}
<ul>
<li>
<a href="https://placeholder.com">
<img src="http://via.placeholder.com/350x150"> <span> Username </span>
</a>
<p> added you as a friend</p>
</li>
</ul>
ul {
width: 150px;
height: 300px;
border: solid 1px #000;
padding: 5px;
}
li {
display: flex;
align-items: center;
justify-content: center;
}
li img {
width: 25px;
height: 25px;
}
li a {
display: flex;
align-items: center;
text-decoration: none;
}
li span {
margin: 0 8px;
}
<ul>
<li>
<a href="https://placeholder.com">
<img src="http://via.placeholder.com/350x150"> <span> Username </span>
</a>
<p> added you as a friend</p>
</li>
</ul>
Maybe the flex-wrap property would be useful in your case. Check this link for more information
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
My html code is very simple, just to test the css max-width and flexbox display. My goal is having the button width as 190px, but it doesn't work. If I remove the display css in my .header, it will work.
Please explain me what is wrong here?
Thanks
Here is my html code:
.header {
padding:0;
background-color: #16325C;
height: 60px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.header ul {
list-style:none;
margin:0;
padding:0;
}
.menu {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
display: inline-block;
}
.menu > .dropdown {
display: block;
max-width: 190px;
}
.menu > .dropdown > button {
background-color: white;
width: 100%;
text-align: left;
color: #16325C;
}
<div class="header">
<ul class="left">
<li class="menu">
<div class="dropdown">
<button>
Text
</button>
</div>
</li>
</ul>
</div>
max-width is working, it defines the maximum amount of width that a box can grow. You are searching for width because your sentence in the question:
My goal is having the button width as 190px, but it doesn't work
So try:
.header {
padding:0;
background-color: #16325C;
height: 60px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.header ul {
list-style:none;
margin:0;
padding:0;
}
.menu {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
display: inline-block;
}
.menu > .dropdown {
display: block;
width: 190px;
}
.menu > .dropdown > button {
background-color: white;
width: 100%;
text-align: left;
color: #16325C;
}
<div class="header">
<ul class="left">
<li class="menu">
<div class="dropdown">
<button>
Text
</button>
</div>
</li>
</ul>
</div>
You assigned display: flex; to DIV .headerwhich means this is the flex container and <ul class="left">is the only flex item in it, *not the li elements in it (direct parent/child relationship). This is probably the (or at least one) cause for your problem.
Whenever I apply flexbox stretch or width 100% to the li items they get pushed to a flex start position at the left side of the page instead of centered.
body {
margin: 0;
}
ul,
li,
a {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.site-wrapper {
min-height: 100vh;
}
.main-header,
.main-nav {
display: flex;
}
.main-nav {
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
}
.main-nav li {
margin-bottom: 5%;
}
.mobile-nav-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.toggle-mobile-nav {
border: 1px solid black;
height: 30px;
width: 30px;
align-self: center;
margin-right: 2.5%;
border-radius: 10%;
padding: 1%;
}
.toggle-mobile-nav:hover {
cursor: pointer;
}
#logo {
margin-left: 20%;
cursor: pointer;
}
.fa-lg {
margin-top: .15em;
font-size: 1.9em;
margin-left: .05em;
}
.intro {
display: flex;
flex-direction: column;
padding-left: 2.5%;
padding-right: 2.5%;
align-items: center;
background-color: #38A5DB;
}
.intro h1 {
padding-top: 10%;
}
.intro h3 {
padding-bottom: 5%;
}
.intro-image {
max-width: 100%;
}
<div class="site-wrapper">
<div class="mobile-nav-wrapper">
<li>
<h1 id='logo'>JP</h1>
</li>
<div class="toggle-mobile-nav">
<i class="fa fa-bars fa-lg"></i>
</div>
</div>
<header class="main-header">
<!-- Main Header Start -->
<ul class="main-nav">
<li>About Me
</li>
<li>My Work
</li>
<li>Playground
</li>
<li>Contact Me
</li>
</ul>
</header>
<!-- Main Header end -->
The align-items:center is causing the li to shrink wrap instead of stretching (which is the default).
So remove it and use text-align:center on the li.
ul,
li,
a {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.main-header,
.main-nav {
display: flex;
}
.main-nav {
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.main-nav li {
margin-bottom: 5%;
background: lightgreen;
text-align: center;
}
.main-nav li a {
display: block;
}
<ul class="main-nav">
<li>About Me
</li>
<li>My Work
</li>
<li>Playground
</li>
<li>Contact Me
</li>
</ul>
I am trying to center the outer 'div' container using Flexbox. I have an unordered list with 3 li's. The li's width is: width: calc(100%/3). The ul's width is 70%. The problem is that when I try centering the ul (justify-content: center), it doesn't get centered.
I finally figured out the source of the problem. When I remove the line: width: calc(100%/3), it centers properly. My question is: How can I get it to center properly?
I tried margin: auto, but that didn't work.
Here's the JSFiddle, and here's the code snippet:
#flex-container {
width: 70%;
list-style-type: none;
padding: 0;
margin: 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
}
li {
box-sizing: border-box;
background-color: tomato;
width: calc(100%/3);
}
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
When I remove the line: width: calc(100%/3), it centers properly
You should not calculate the width when you are using flex layout, because that is what flex is itself supposed to do.
If you are looking to align the text inside of the lis then text-align is what you need. You should also remove the width from the lis and use the flex property instead.
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
list-style-type: none;
width: 70%; display: flex;
}
li {
flex: 1 1 auto;
background-color: tomato; border: 1px solid #fff;
text-align: center;
}
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
If you are looking to have variable width lis then justify-content is what you need. You should control the width via the width property and use flex property as required to expand or shrink.
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
list-style-type: none; width: 70%;
display: flex; justify-content: center;
background-color: #eee;
}
li {
flex: 0 0 auto; width: 15%;
background-color: tomato; border: 1px solid #fff;
}
li:first-child { width: 20%; }
li:last-child { width: 30%; }
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
I modified your code:
http://jsfiddle.net/hrr65ajr/2/
#flex-container {
width: 70%;
list-style-type: none;
padding: 0;
margin: 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
}
li {
box-sizing: border-box;
background-color: tomato;
margin: auto;
width: calc(100%/3);
text-align: center;
}
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
Try this:
HTML
<div class="center">
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
</div>
CSS
.center {
display:flex;
-webkit-justify-content: center;
justify-content: center;
}
#flex-container {
width: 70%;
list-style-type: none;
padding: 0;
margin: auto 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
}
li {
box-sizing: border-box;
background-color: tomato;
width: calc(100%/3);
}
I have a page with nested flex boxes here: http://jsfiddle.net/fr0/6dqLh30d/
<div class="flex-group">
<ul class="flex-container red">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
</ul>
<ul class="flex-container gold">
<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>
</ul>
<ul class="flex-container blue">
<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>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
</ul>
<div>
And the (relevant) CSS:
.flex-group {
display: flex;
flex-direction: row;
height: 500px;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 0 0 auto;
}
.flex-item {
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
The outer flexbox (.flex-group) is meant to lay out from left-to-right. The inner flexboxes (.flex-container) are meant to layout from top-to-bottom, and should wrap if there isn't enough space (which there isn't in my jsfiddle). What I want to happen, is that the .flex-containers will grow in the X direction when the wrapping happens. But that's not occurring. Instead, the containers are overflowing.
What I want it to look like (in Chrome): https://dl.dropboxusercontent.com/u/57880242/flex-good.png
Is there a way to get the .flex-containers to size appropriately in the X direction? I don't want to hard-code their widths, since the items that appear in these lists will be dynamic.
I've been playing with this for a few minutes now, and I think I've got what you're looking for.
Here's the CSS
.flex-group {
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.flex-container {
flex: 0 1 auto;
display: flex;
flex-flow: row wrap;
align-items: space-around;
align-content: flex-start;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
.red li {
background: red;
}
.gold li {
background: gold;
}
.blue li {
background: deepskyblue;
}
.flex-item {
flex: 0 1 auto;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
And here's an updated fiddle to see it in action.
Interesting, I also fiddle around with it. I have given the flex-container a flex:1 100%; This evenly space the containers to 100%; The blocks will flow in their own container space and the containers keep equal height and weight no matter how you size the window.
.flex-container {
flex: 0 100%;
display: flex;
flex-flow: row wrap;
align-items: space-around;
align-content: flex-start;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
See fiddle here