I have a div that has a table inside it, and it uses to create the links to it. So far, that's all I have done for the website. I'm attempting to space out the rows so that I can implement jQuery into it, however, I haven't started that yet.
My problem is that I can't get the rows to space evenly throughout the div. I've tried padding-left/right, however, that doesn't work with width and height, and margin-left/right aren't working. Is there a way to do this? Or, should I just get rid of the idea of using a table and create divs for each nav option?
Code
Here's one possible solution using lists and display:flex for positioning. Your updated example: https://repl.it/Hj62/6.
HTML part:
<div id="header-nav-content">
<ul class="table-nav-content">
<li class="nav-home">Home</li>
<li class="nav-about">About</li>
<li class="nav-contact">Contact</li>
</ul>
</div>
CSS part:
.table-nav-content {
text-align: center;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
}
.table-nav-content li {
list-style: none;
}
You can also check if:
justify-content: space-between;
doesn't suit you better. You can find more about flex positioning, for example: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would recommend that you use the HTML list approach, https://www.w3schools.com/html/html_lists.asp. You might want to use margin not padding to space out each item evenly, When to use margin vs padding in CSS.
<ul style="list-style:none;">
<li style="display:block;float:left;margin:5px" class="nav-home">Home</li>
<li style="display:block;float:left;margin:5px" class="nav-about">About</li>
<li style="display:block;float:left;margin:5px" class="nav-contact">Contact</li>
</ul>
Related
I have the following setup:
<div class="container">
<button id="print-button" title="print" type="button">🖨</button>
<label for="print-button">Print Me!</label>
</div>
I wanted to use flex-box to place the button above the label, aligning them to the right of the parent element of the div, making the button the same width as the label.
.container{
display: flex;
flex-direction: column;
align-items: flex-end;
}
button{
appearance: none;
font-size: 2rem;
border: none;
background-color: yellow;
}
label{
font-family: sans-serif;
}
Works, as expected, but the button logically has it's own (in this case) smaller width.
If I set the container width to fit content and the align-items to stretch I get what I want width-wise but the container by default stays left. I could work around that with floats or positions, but that's not what I'm looking for. I also do not want to ad semantically unnecessary markup. I can (and probably will) use a grid, I just 'felt' that somehow this should be easily achieved with flex, I just couldn't find a way.
Here is a codePen: https://codepen.io/mdrei/pen/QWmMMeO
to play with, if needs be.
Thank you for reading: I'd like to clarify: I'm not interested in other solutions to the problem, I have several in mind. I'm interested to find out if what I wanted is doable with flex-box.
(Lets see if a moderator once again thinks he/she has to censor me because I say thank you)
I think you will achieve it using display grid.
.container {
display: grid;
grid-template-columns: max-content;
}
Then just add float right if you want it to align to the right
Using only flex-box, you can add another div to achieve what you want:
(Unnecessary markup is added, I know, but maybe that could help you)
<div class="container">
<div class="another-container">
<button id="print-button" title="print" type="button">🖨</button>
<label for="print-button">Print Me!</label>
</div>
</div>
.another-container {
display: flex;
flex-direction: column;
}
Here is a codePen : https://codepen.io/Deirok/pen/MWVvrdG
Have a great day :)
I am learning css these days. I am designing a navbar by using css flexbox. Here is my html and css code, but they are not working on my browser.
Can anybody find any problem?
* {
margin: 0px;
padding: 0px;
}
/* Navigation Bar */
#navbar {
display: flex;
align-items: center;
flex-direction: row;
top: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website Page</title>
<link rel="stylesheet" href="/originals/style.css">
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">Our Clients</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</body>
</html>
The display: flex property only applies to the direct children elements within the flex container. I'm guessing that you want the list items to also be "flexed" so in order to do that - you need to apply display flex to the ul as well as the nav.
In other words - the nav bar applies display flex to ONLY the div containing the image image and the ul. In order to align and space out the list items - the ul needs to also be a flex container. I am using space-around to space out the list items - but obviously you might need to alter the styling to suit your needs.
*{
margin: 0px;
padding: 0px;
}
/* Navigation Bar */
#navbar{
display: flex;
align-items: center;
flex-direction: row;
top: 0px;
}
#navbar ul{
display: flex;
align-items: center;
flex-direction: row;
top: 0px;
list-style: none;
flex-grow: 1;
justify-content: space-between;
margin-left: 32px
}
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">Our Clients</li>
<li class="item">Contact Us</li>
</ul>
</nav>
I am not sure what you are trying to achieve, I suppose you need all items in the navbar evenly distributed on a horizontal line on top of the page. If that is what you need, a few indications:
The main problem is that display: flex will distribute only the immediate children of the box with that property. In your case it means that your flex items are the logo div and the ul as a whole, and it will not distribute the items inside the ul. To achieve the latter effect, you would also need to set the ul display to flex.
You are using the align-items property to configure flex items alignment, but this property aligns items in the direction opposite to the flex direction. As your flex direction is row, align-items: center aligns them in center vertically, from top to bottom. You won't notice its effects here because your container by default has the same height as its content, so items can't be assigned different vertical positions. But if you specify a larger height for your flex container, you will notice that all flex items will appear in the middle of the flex container's height; that could be useful in the outer flex container to align the ul items in the middle of the logo's height.
You should try the property justify-content to align your flex items in the same direction of your flex container, in this case horizontally. Try checking different values for this property, like space-around or space-evenly to achieve the distribution you need.
The top property is not needed here, unless you use it with a positioned element. You need to use it together with some value for the position property.
A CSS flexbox handles the row and column alignment of direct children elements to the parent in which flexbox has been applied. For Example, In your code:
<nav id="navbar"> is the parent which contains direct children elements, <div id="logo"> and <ul>, anything inside <div id="logo"> and <ul> are not the direct children to <nav id="navbar">. So, if you observe the <div> containing logo and the <ul> containing list of links are aligned horizontally beside each other due to #navbar ul{ display: flex;}
In order to make your list of links appear beside each other horizontally much alike your logo and list, you will need to give <ul> element display flex because <ul> acts as the direct parent element to <li> elements ; and since default value of flex-direction is row you may or may not set the value for it, as you like.
Hope this helps clarifying your concepts. Keep Learning!
#navbar{
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar > ul{
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar > ul > li{
margin-right: 0.875rem;
list-style-type: none;
}
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">Our Clients</li>
<li class="item">Contact Us</li>
</ul>
</nav>
I'm working on a Navbar for my website and I noticed that if I had the links on the right using float: right they would reverse the order. I thought that I could reverse them back by using Flexbox's
flex-direction: reverse-row. This does not appear to work though?
Here's the code that should be responsible for re-reversing this effect:
.headerItem {
display: block;
padding-left: 7px;
padding-right: 7px;
float: right;
display: flex;
flex-direction: row-reverse;
}
Any hints/help?
float property is not part of flex. This will prevent it from doing what it is suppose to, because you are forcing it to float to right. Flex has its own way of doing that. its called justify-content - flex-start, flex-end, center, space-between and space-around. Try which one works for you.
Ok, so I found the answer. #jmag has provided some useful info, and some further Googling helped as well. The new navbar looks like this:
<div id="header">
<span id="headerLogo">XaafCode</span>
<div id="navbar">
Home
Portfolio
Contact me
</div>
</div>
In the CSS I have this now, which easily fixed it:
#navbar, #header { justify-content: space-between; }
I was trying to create my portfolio page. I have 4 subheadings (About, Resume, Blog and Portfolio).
So I wanted to put these headings on top center of my div. So what I did was created an unordered list gave it property to display inline. Now all headings come to the same list.
Now I want to give spacing between the headings. Of course margin and padding options are there but is there any way in which I can avoid margin/paddings and do this directly by flex?(I wanted to reduce load on media queries for small screen)
The ul can be the flex container, and you can spread the elements evenly using justify-content: space-between:
.header {
display: flex;
width: 50%;
margin: 0 auto;
padding: 0;
justify-content: space-between;
list-style: none;
}
<ul class="header">
<li class="header__item">About</li>
<li class="header__item">Resume</li>
<li class="header__item">Blog</li>
<li class="header__item">Portfolio</li>
</ul>
you may use justify-content and eventually pseudo elements to squeeze elements to middle
nav {
display:flex;
justify-content:space-around;
}
/*increase space from side at first and last child */
nav:before,
nav:after {
content:'';
width:25vw;/* or % . tune this or remove pseudo if unneeded */
}
a {
margin:0 1em;
}
<nav>
About
Resume
Blog
Folio
</nav>
I've recently been playing with Flexbox for the first time and, in general, it's absolutely amazing. I've encountered an issue recently however, where I cannot seem to give flex items that are wrapping any vertical spacing.
I've tried using:
align-content: space-between;
but this doesn't seem to do anything. From the reading I've done, this would only seem to work if my flex container is taller than the elements contained within (is this right?) If so, then would I not have to set a height for my flex-container, which would seem to defeat the purpose of using flexbox?
The only way I can think of to make this work would be to give bottom margin to the elements within, but again this seems to defeat the purpose.
Hopefully I'm missing something fairly obvious - here's a link to a codepen: http://codepen.io/lordchancellor/pen/pgMEPz
Also, here's my code:
HTML:
<div class="container">
<div class="col-sm-12">
<h1>Flexbox Wrapping</h1>
<div class="flexContainer">
<div class="flexLabel">This is a flex label</div>
<a class="btn btn-primary">Button 1</a>
<a class="btn btn-warning">Button 2</a>
<a class="btn btn-success">Button 3</a>
</div>
</div>
</div>
CSS:
.flexContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: center;
}
.flexContainer .flexLabel {
flex-basis: 150px;
flex-shrink: 0;
}
EDIT - Just going to add a little more detail here, as I'm not sure I'm putting it across well enough.
In my larger project, I have some block level elements that are arranged in a row using flexbox. However, there needs to be some responsiveness as the user may reduce the screen width. At this point, I want my elements to begin to stack (hence the wrap). However, as the elements begin to stack, they are all touching vertically, where I want there to be spacing.
It's beginning to look like top and bottom margins may be the only way to resolve this - however I was wondering if there was a flexbox-centric way to achieve this.
I had a similar issue and I used the following hack to solve the issue.
/* add a negative top-margin to the flex container */
.flexContainer {
/* ... your existing flex container styles here */
margin: -10px 0 0 0;
}
/* add a corresponding positive top margin to all flex items (all direct children of the flex container) */
.flexContainer > * {
margin-top: 10px;
}
For the top row of flex items the negative and positive margins cancel out, for the subsequent rows it adds the margin between the rows (in this case 10px between rows).
It's less than elegant but it gets the job done.
If you force wrapping by applying a width you can then use margins as you normally would without setting a height.
.flexContainer {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
background: pink;
width: 150px;
}
.flexContainer > * {
margin: 1em 0;
}
.flexContainer .flexLabel {
flex-basis: 150px;
flex-shrink: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-sm-12">
<h1>Flexbox Wrapping</h1>
<div class="flexContainer">
<div class="flexLabel">This is a flex label</div>
<a class="btn btn-primary">Button 1</a>
<a class="btn btn-warning">Button 2</a>
<a class="btn btn-success">Button 3</a>
</div>
</div>
</div>
row-gap would solve your problem
.flexbox {
display: flex;
column-gap: 10px;
row-gap: 10px
}
It's because you don't have a height on your flex content for it to calculate the space-between so at the moment, the flex container is as small as possible. Add a height and it should work.
Another hacky solution is to give the item a bottom border:
border-bottom: 10px solid transparent;