This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 6 years ago.
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;
}
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
Related
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'm making 2 columns with CSS Grid and with Collapsible div.
The problem is when I expand the one of the collapsible div,
the other div will also expanding with white space.
Anyone knows how to fix this without making 2 parents div for 2 columns?
Or using other method instead of CSS-grid?
screenshoot css grid with collapsible div
What you're trying to achieve is more of a masonry kind of layout on an expansion of an accordion. That is not something grid is designed for. The CSS Grid is two dimensional so you are always working with rows and columns at the same time.
Solution: Flexbox
#grid {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-around;
height: max-content;
flex-flow: row wrap;
counter-reset: brick;
}
.cell {
width: 250px;
flex: 1 0 calc(33.333% - 20px);
padding: 20px;
background: #efefef;
}
Please check the demo I have created. https://codepen.io/abhishekrajeshirke/pen/NLzLJJ
Hope it answers your question.
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
Closed 6 years ago.
I currently have a flexbox layout that looks like this:
The blue is class = "wrap", the orange and all three yellow boxes are contained in two separate class = "wrap_col", and each yellow box is contained in class = "wrap_item".
.wrap {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
}
.wrap_col {
display: flex;
flex-direction: column;
flex: 1 0 auto;
}
.wrap_item {
margin:10px;
display: flex;
flex:1 0 auto;
flex-direction: column;
}
How can I shrink the three yellow boxes' heights down so that it is the same height as the orange box? Can you shrink flexboxes down to the same height as the shortest box?
An easy way to achieve this would be to make sure that the height of both your columns with the .wrap-col class is this same (either set a fixed height or set height: 100% and have them both fill the space of the .wrap element). Then make sure flex-shrink: 1 is set for all flex items to.
.wrap_item {
margin:10px;
display: flex;
flex:1 1 auto;
flex-direction: column;
}
Here is a jsfiddle. Try changing the height of the .wrap element and you can see the boxes resizing to fit.
I can't make wrap the divs into columns.
Here is my code
.hosts.body
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
align-content: flex-start
align-items: flex-start
.server
border-left: 0.3em solid $green
padding: 0.3em
color: $green
margin: 0.1em
background: #c8e6c9
min-width: 12em
max-width: 12em
overflow: hidden
Link: http://codepen.io/CJRoman/pen/YXNGGq
What i'm doing wrong? I can't find out what it needs additionally to wrap.
you need to set a height to containing flexbox element,
try modifying like this:
.body
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
align-content: flex-start
align-items: flex-start
height: 500px
this fiddle is a little different but it's just to give you an idea
flex-direction: column means the child-element will align from top to bottom and every one will occupy one line,you can remove it because of the default value is flex-direction: row,which means every child-element will display in one line if the width of flex-container is big enough
I am using a flexbox container that is using a row layout that wraps. Each of the items is exactly the same size (150x267 pixels). I have added a margin of 10px to each of the items to provide some space.
Flexbox does a great job of laying out the items but I am trying to get a layout so that whatever the viewport width, the spacing between each of the items is the same. Sometimes this occurs but at a width of about 1400px, there is noticeably a much larger gap between the images than the 10px margin on each end of the row.
My CSS is
div#imgcontainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
font-size: 0;
}
div#imgcontainer img {
margin: 10px;
height: 150px;
}
You can see an example of the layout at 3-dot-timb-photos.appspot.com