I'm really new to html and css, so this is my first full attempt at making a nav bar, items in nav bar stuck to the top of the page, please tell me where things went wrong
https://codepen.io/galia-s/pen/GRojmwV
.flex-content {
display: flex;
margin: auto 3.25rem;
align-items: center;
}
Instead of align-content, you might be looking at align-items, depending on what you are trying to achieve. I assume you want to center these items.
So your .flex-content class could look like this:
.flex-content {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 5rem; //set height here instead of header
}
Hope it helps.
You posted way too little information for a reliable answer, but anyway: To get flex-items to stack vertically, you have to add flex-direction: column; to the flex container.
Related
https://github.com/Yankysamurai/Personal-Website-P5
I am new to posting questions but I am trying to center my text "Welcome to my site" horizontally and vertically. I want it half the distance from the image and from the right margin. I tried display flex but it didn't work.
I just opened a git hub account so I hope you can see the code from the link.
Thank you.
So, the flex container has an img and h2. In order to vertically center the text (relative to the image), you need to set align-items: center;
.about_img_h2 {
display: flex;
justify-content: space-around;
align-items: center;
}
I would suggest using jsfiddle next time, because it makes it easier to review the problem. I created this one (using the GitHub repo you shared) with the fix:
https://jsfiddle.net/13sc4m76/
Let me know if I misunderstood your question and I can take a second look.
you can use the following ways to center elements in a block:
display: flex;
flex-direction: row;
justify-content: center
or
display: flex;
flex-direction: column;
align-items: center
I can't figure out where the whitespace (highlighted with yellow), right from the user icon, is coming from. I want the user button to only have a small margin on its right.
If I try to inspect it (see image bellow) it says it's part of the ul element but I can't find the issue.
I don't know what snippet to share because I'm not sure where the problem is but bellow is the CSS of the ul element, the entire CSS and the HTML where the ul element is.
The HTML:
https://github.com/NezaVizintin/Swapet/blob/master/Views/Shared/_Layout.cshtml
CSS specifically for the ul element:
nav > ul { /*all elements together on navbar*/
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
margin: unset; }
This entire CSS:
https://github.com/NezaVizintin/Swapet/blob/master/wwwroot/css/custom-swapet.css
Though Your question was not that clear but based upon my understanding I can give you these solutions.
In the second Image the green portion is the left-padding for the <ul> tag you can remove it by just setting the padding-right:0.
Talking about why there is the yellow marked space to the right of your user ? , it is because you have set the justify-content to start - which forces your <ui> element to strictly align towards the left of the container leaving that yellow space to the right.
A possible solution to this can be setting the justify-content to space-between-which will let all of the li to be equally spaced and also makes your user align to the right removing that yellow space and then you can add a little margin to the right if you want.
Proposed Changes to CSS
nav > ul {
display: flex;
flex-direction: row;
justify-content: space-between; /*proposed changes*/
align-items: center;
margin: unset;
padding:0; /*proposed changes*/
}
Here,
I don't know the exact problem but and padding: 0 will solve your problem.
nav > ul { /*all elements together on navbar*/
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
margin: unset;
padding: 0;
}
Let me know if it does not works for you.
I am using the Vali Admin theme and I am trying to push the last list item in the left sidebar to the bottom.
I have barely used flexbox before so I am not familiar with it at all, but I changed the menu to display: flex and then followed this answer to try to push the last item to the bottom. I am trying to do exactly what the person in that question if after.
These are my modifications to the theme:
.app-menu {
#extend .app-menu;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
li:last-of-type {
margin-top: auto;
}
}
Working fiddle.
I think the problem is that the menu isn't using as much height as it can.
I would gladly include a working snippet but for the love of my I couldn't figure out how to create a jsfiddle. It doesn't allow local files and it would block my gist. Same with Codepen.
Add the following on .app-sidebar:
display: flex; // make sidebar a flexbox
flex-direction: column; // so it will align column direction
We do the thing above so we can apply flex related styling on the child.
This will make the parent or sidebar a flexbox, then add the following on .app-menu
flex: 1; // this will take all the remaining space on the sidebar
and remove padding-bottom on .app-menu so the last item will stay in the bottom without the padding.
try this
.app-menu {
margin-bottom: 0;
padding-bottom: 40px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
height: 100%;
if last item need to be displayed at the bottom of the page. try by setting height:100% to the ul
It's right to do as it described in link you've attached.
But you didn't set 100% height for your ul.
Setting height: 100%; to .app-menu class solves your problem.
Here is the working example based on your code:
https://jsfiddle.net/zewx18ps/1/
i want the second block quote element to look like the first one but with a clickable name and pic so i wrap them in an anchor tag it didn't behave like i wanted the text sits under the image. making the anchor tag a flex container fixes my problem i just don't understand why it behaves like that.
.review__user a {
display: flex;
align-items: center;
margin-right: auto;
}
demo is right here pen
.review__user, .review__user > a{
display: flex;
width:100%;
align-items: center;
}
Try this, it will solve your problem. Hope it helps.
Try this. Hope it helps.
.review__user a {
display: flex;
align-items: center;
align-content: center;
flex: 1;
}
I'm very new to CSS, and I'm struggling on positioning a flex item (DownloadButton) the way I want it too.
I want to position a flex item a certain way, but my googling skills are failing me.
The current state looks like this:
Icon DownloadButton DeleteButton
What I want is this:
Icon DownloadButton DeleteButton
I thought I could use align-items, but that's for the cross axis. Rather than even spacing, like the normal flex behavior, I want my DownloadButton hugging the DeleteButton at the end. However, my Googling skills have failed me. Help would be greatly appreciated, thanks guys!
I would align the items to the end (for preference) and then adjust the first one.
As pointed out in the comments the end alignment is not necessary as the effect is caused by the margin adjustment.
.parent {
width: 80%;
margin: 1em auto;
border: 1px solid grey;
display: flex;
justify-content: flex-end;
padding: .5em;
}
button:first-child {
margin-right: auto;
}
<div class="parent">
<button>Icon</button>
<button>Download</button>
<button>Delete</button>
</div>
Add these styles to the container:
#flex-container { /*Select Your Flex Container*/
display: flex;
flex-direction: row;
justify-content: space-between;
}
Add these styles for the flexible items:
.flexible-items { /*Select The Children Of The Flex Container*/
flex-grow: 0; /*This Is Default*/
}
#Icon {
flex-grow: 1;
}
If you want some space between the other two flexible items, you can achieve this by multiple methods, 1 being to add some margin and padding styles for their sides.