This question already has answers here:
How to vertically align text inside a flexbox?
(13 answers)
Closed 5 years ago.
I'm just introducing myself to flexbox and from what I understand if I have a flex parent, then I can align the children of the parent that are on a single row with the align-items rule. However, my children are not changning their alignment as seen here: https://jsfiddle.net/b9L09gsa/
The content remains at the top instead of at the bottom like I would like. The idea is to have the logo div and nav items align neatly at the bottom. Clearly I don't understand something, any help would be great!
You need those properties on the flex container, not the flex items:
#nav-contain {
display:flex;
justify-content: flex-end;
align-items: flex-end;
}
#logo, .nav-item-contain {
flex-grow: 1;
}
https://jsfiddle.net/b9L09gsa/1/
To override individual flex items, use align-self instead:
#nav-contain {
display:flex;
justify-content: flex-end;
}
#logo, .nav-item-contain {
flex-grow: 1;
align-self: flex-end;
}
https://jsfiddle.net/b9L09gsa/2/
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
This is what I want it to look like:
This is what it looks like now:
Currently, the parent has a display of flex, and it's relevant code is:
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
with the children having the code of:
flex: 0 0 100%;
In a different project I made it work by giving the parent a display of table and the children a display of table-cell and vertical-align: middle. However, using table to position elements isn't a good practise.
Did you set the right direction?
flex-direction: column;
I am trying to left align items in a flexbox like so. However i cannot get them to align like in a grid display, ive tried all the flexbox properties but can only get it to work using a grid, but i cannot use a grid here.
Here is the code i have:
CSS
.container {
display: flex;
align-items: center;
justify-content: space-between;
text-align:left;
}
I need all text to align left by the red line.
It is needed to fix the width of each items to align the position.
Try to add flex-basis css property to all child styles.
So if the above style is something like .list-item, then add this style to all childs like...
.list-item > div {
flex-basis: 25%;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I receive an unknown number of items that I display in a flexbox, with a maximum of 3 per row. As long as there are 3 items on a row, this code centers it but if there are less than 3, it will keep them as if there were 3, but with a gap where the other items would be. For example, if there are 11 items, it will render four rows with a gap in the 'third spot' on the fourth row. I want the two items on the final row to be centered.
This is what I currently have:
.Container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.item {
flex-basis: 33%;
display: flex;
justify-content: center;
}
Am I missing something obvious, or is this not possible with flexbox?
You should know about main axis and cross axis, here you want to center them on main axis and hence you need to use justify-content: center on container itself.
Try this code.
.Container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
Read about it more on this page.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
try to add justify-content: center to .Container.
Also, here is a good examples https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
I am trying to style my elements so that it looks something like this. (The square elements should all be same size)
But what ends up happening is this:
This is my css code for the container and elements:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
height: 400px;
}
.element {
width: 80px;
height: 80px;
background-color: white;
}
Add align-content: flex-start to the .container style.
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
More info about align-content.
I have a flexbox with a single item. This item is horizontally and vertically centered. When the item grows taller than its container it overflows equally at the top and the bottom of the container. I would like it to only overflow at the bottom, and remain anchored at the top. Any ideas?
http://codepen.io/wilsonpage/pen/LzryK (view in Chrome Canary for latest Flexbox)
Under the standard Flexbox draft, a single flex item can be vertically and horizontally centered by using margin: auto. You'll want to use this instead of the align-items property:
http://codepen.io/cimmanon/pen/EJdvn
section {
display: flex;
justify-content: center; /* you can remove this here, but its not hurting anything */
/* remove align-items */
height: 80%;
margin: 5% 0;
background: green;
}
div {
margin: auto; /* add */
}
Try setting the following on the flex item:
align-self: flex-start;