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/
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;
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
Basically, how do I achieve this layout while having equal spacing on both left and right sides? Space-between and space-around do not seem to work because the remaining elements at the bottom are then either centered or on both sides of the container.
You can use flex-wrap:
flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
I have a grid of product tiles I'm displaying with flex to be equal height based on this codepen: https://codepen.io/imohkay/pen/gpard
They are 3-wide. However, on the last "row" when there is only 2 tiles left, the last tile gets pushed to the right as if there were 3 tiles. I can't figure out the right css setting to make it be in the second column.
Screenshot: https://pasteboard.co/Hk699jP.png
#products {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: stretch;
}
.product {
width: 33.3%;
}
They're pushed from each-other because you're using the space-between option on the justify-content property.
Either change space-between to flex-start or switch the display to a grid layout.
Fiddle (flex-box https://jsfiddle.net/swordys/db7dzkcx)
Fiddle (grid https://jsfiddle.net/swordys/65cyr3tu/)
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.
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/