Menu
I have a sidebar that is longer than the content (post previews with thumbnails).
I am using flexbox to build the layout and when the sidebar is longer than the previews, there is a huge gap in between.
I want each row to not have a gap in between as it would if the sidebar was nice and short.
I have thrown together a codepen.
//page wrapper for sidebar
.flexPageWrapper {
display:flex;
/* Centering the page */
max-width:1500px;
margin:0 auto;
}
//search results flexbox container
.searchContentWrap {
flex-grow: 1;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-right: 1em;
flex-direction: row;
}
983
You can simply use the CSS justify-content property with the value space-between to set space between flexbox items. In the following example the flex container has 4 items where each flex item has a width of 20%, and the remaining 20% space is distributed evenly between the flex items.
Use the flex-grow property to make a flex item consume free space on the main axis. This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.
One of the major drawbacks of using flexbox is performance issues. The use of flexbox can increase the page loading time if you have a larger project.
An initial setting of a flex container is align-content: stretch.
This means that multiple lines in a flex container will expand to cover the length (in this case, height) of the container.
The sidebar is increasing the height of the container, causing your thumbnail content to distribute over a taller space.
You can override this default behavior with align-content: flex-start.
.searchContentWrap {
flex-grow: 1;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-right: 1em;
flex-direction: row;
align-content: flex-start; /* NEW */
}
Revised Codepen
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
