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; }
Related
I'm trying to do a front of an HTML website by using vue.js,
but I wasn't able to center an image using css.
I wrote all of my code in the App.vue file :
<template>
<div id="container3">
<img id="teamBackground" src="./assets/bourg_palette_rounded.png" alt="Bourg palette in background" width="360" height="170"/>
</div>
</template>
<style>
<!-- team -->
#container3 img{
display:block;
margin:0 auto;
}
</style>
I tried the text-align and the display-block + margin: 0 auto properties but it didn't change neither the placement of the image or the placement of other elements
Have you tried using display:flex; together with justify-content:center;?
You can also try out using position:absolute;
You can read more about image-centering methods here: https://www.freecodecamp.org/news/how-to-center-an-image-in-css/
#container3 {
display: flex;
flex-direction: column;
justify-content: center;
}
you can put those css codes to the parent div
#container3 {
display: flex;
width:100%;
height:500px;
justify-content: center;
align-items: center;
}
Flexbox is the most suitable solution for your problem.
The parent (#container3) should be a flex container. For horizontal centering we use justify-content: center & for vertical centering we use align-items: center.
Note: We must provide height to the parent for child to align in vertical direction. Also the above example is for default flex-direction ( row). For more details refer to the page https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox
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 have written a CSS margin for spacing between checkboxes. It works fine on chrome but not on Firefox.
here is CSS
.vehicle-types {
float:left;
width:100%;
margin: 6px 0;
.check-vehicle {
float:left;
width:100%;
.checkbox-btn {
width: auto;
display: inline-block;
margin-right: 20px;
float:left;
input {
float:left;
width:0 !important;
}
label {
margin:0 !important;
float:left;
}
}
}
}
is there any Firefox browser specific CSS?
(screenshots below)
Thanks in advance.
Chrome
Firefox
Okay, So I was writing this answer before you pushed your edited post. I am still to go through the code but as an alternate you can try this and see if it works or not
update: You have only shared css which is still very difficult to comprehend
An ideal solution to have everything on the same line would be to do.
.parent-div {
display: flex;
flex-direction: row;
justify-content: space-between
}
.child-div {
align-items: center;
display: flex;
flex-direction: row;
}
.create-box {
height: 30px;
width: 30px;
border: 1px solid black;
}
p {
margin-left: 5px;
}
<div class="parent-div">
<div class="child-div">
<span class="create-box"> </span>
<p> checkBox 1 </p>
</div>
<div class="child-div">
<span class="create-box"> </span>
<p> checkBox 1 </p>
</div>
<div class="child-div">
<span class="create-box"> </span>
<p> checkBox 1 </p>
</div>
</div>
In the above code I have used flex
flex-direction says that wether you want your divs to be stacked in row or columns i.e consider this somewhat equivalent to bootstrap class row . (if you have used bootstrap previously)
justify-content: space-between: space-between gives equal space between each square, but not between it and the container.
Note: You could have also used space-around
Space-around puts an equal cushion of space on either side of the square — which means the space between the outermost squares and the container is half as much as the space between two squares (each square contributing a non-overlapping equal amount of margin, thus doubling the space).
align-items: center; just align everything inside a div to centre across x-y axis
I found this article very useful when learning about flexboxes (might help you as well)
Look, the Firefox version adds that margin to the first child as well..
To avoid that, use:
.checkbox-btn:not(:first-child) {
...
margin-right: 20px;
...
}
I had this kind of problem also but with IE, for the next time you can use this code
it will only show on firefox, you can edit what you want and it will only show on firefox
#-moz-document url-prefix() {
//just write the code here
}
I know its not a problem from your code but if that was the case you could go to:
https://caniuse.com/
and check if it is your code
My sidebar is getting pushed down instead of staying inline with my main class, you can view the issue more in my fiddle. (This is one of the first times I've not used bootstrap for a project in a very long time).
view my fiddle.
Instead of float, using flex is a better approach for responsive design.
Try putting your sidebar and main inside a div with display as flex and flex-wrap as wrap.
Here's an example-
.flexbox {
display: flex;
flex-wrap: wrap;
}
.latest-single {
width: 70%;
background-color: blue;
}
.sidebar {
width: 30%;
background-color: green;
}
<div class="flexbox">
<div class="latest-single">
This is our primary content
</div>
<div class="sidebar">
This is our sidebar content
</div>
</div>
You have to choose a way of how to display them. (block,flex,table)
i made it working by adding the display:flex on .container class.
jsfiddle https://jsfiddle.net/31rjm8qb/7/
You have a couple of problems here.
.main has width 100% so .sidebar can not fit
.sidebar is floated while .main is not, so they will not line up
I think it would be a good idea to try out display: flexbox and remove floats altogether.
Check out the following article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In the old days I would have used two containers and floated one left and the other right using clearfix. But I think that method is a bit antiquated with flex capabilities being well supported now.
Problem is I have no idea how to lay this out using flex.
Here is a screenshot with some buttons. Secondary action is aligned left and the other two primary actions should be right aligned.
Here is the markup I have:
<footer>
<button>Back</button>
<span class="primary-btns">
<button>Cancel</button>
<button>Go</button>
</span>
</footer>
Can someone tell me what CSS flex methods I should use here?
You can just use justify-content: space-between
footer {
display: flex;
justify-content: space-between;
}
<footer>
<button>Back</button>
<span class="primary-btns">
<button>Cancel</button>
<button>Go</button>
</span>
</footer>
Update: You can also do this without span with margin-left: auto DEMO
You don't even need a nested container in this case.
Modern CSS technologies (flex and grid) make this layout simple and require just one container.
footer {
display: flex;
}
button:first-child {
margin-right: auto;
}
button {
margin: 5px;
}
<footer>
<button>Back</button>
<button>Cancel</button>
<button>Go</button>
</footer>
Flex auto margins consume all free space in the specified direction.
This would also work:
button:nth-child(2) { margin-left: auto }
All about auto margins here: Methods for Aligning Flex Items