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.
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I am trying to horizontally center one div inside parent div (Which is display flex in column mode) using margin 0 auto. When I do this the inner div is getting shrinked to the size of its content. Can someone explain why this is happening and how to fix this?
HTML
<div class="container">
<div class="mydiv">
CENTER THIS DIV
</div>
</div>
CSS
.container{
background-color: brown;
height: 100px;
display: flex;
flex-direction: column;
}
.mydiv{
background-color: chartreuse;
max-width: 500px;
margin: 0 auto;
}
If I remove flex from parent, then I am getting the correct output :
However, with the flex properties as in above code, this is what I get :
When you use display: flex; in a parent, the children automatically get the default flex values:
The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto".
That's why your .mydiv adjusts to fit the text.
(more info: https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
If you don't want that to happen you could do something like this:
.container{
background-color: brown;
height: 100px;
display: flex;
flex-direction: column;
align-items: center; /* add this */
}
.mydiv{
background-color: chartreuse;
width: 100%; /* add this */
max-width: 500px; /* add this */
}
Working example:
https://codepen.io/sergiofruto/pen/dyMqbrm
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
The red borders are around flex items. They have
flex-grow: 1
These items are contained in a flex container:
width: 100%
display: flex
flex-direction: row
align-items: flex-end
As you can see the vertical alignment is working fine.
When I put the images in, the width of the images pushes the flex items to be bigger or smaller than they should be. The width of the images overrides the width of the flex items. What I want to say is something like:
Firstly make the flex items all the same size and then size the contained images (whatever their natural size) to be the size of their container (the flex item). I've tried width: 100% and width: auto on the images. Didn't help.
This image shows the equally spaced flex items (red borders). I want the images to fit into these boxes without causing the width of the box to change. This is the behaviour I get if I replace the flex items with table cells.
This Fiddle shows the 3 equal boxes: https://jsfiddle.net/justinwyllie/zdrd89gu/
.flex-container {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.flex-boxes {
flex-grow: 1;
border: 2px solid red;
}
<div class="flex-container">
<div class="flex-boxes">A</div>
<div class="flex-boxes">B</div>
<div class="flex-boxes">C</div>
</div>
This one shows an image in the middle flex item. It has completely messed up the equal boxes. The question is what do I need to do to make the cat fit into the middle box? (Fit width-wise that is; i don't mind about height).
https://jsfiddle.net/justinwyllie/zdrd89gu/1/
.flex-container {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.flex-boxes {
flex-grow: 1;
border: 2px solid red;
}
.cat {
width: auto;
}
<div class="flex-container">
<div class="flex-boxes">A</div>
<div class="flex-boxes">
<img class="cat" src="http://www.publicdomainpictures.net/pictures/30000/velka/annoyed-cat.jpg" />
</div>
<div class="flex-boxes">C</div>
</div>
The flex-grow property tells flex items how much available space in the container to consume.
In your second image, the empty items are all equal width because flex-grow: 1 tells them to distribute available space equally among themselves.
Any content you put in these items will impact flex-grow since, as mentioned, flex-grow is based on the free space in the container – and content consumes space.
If you want the items to maintain a fixed width, use flex-basis.
So instead of:
flex-grow: 1;
Try:
flex: 0 0 20%; /* don't grow, don't shrink, fixed width at 20% */
The 20% is just an example, if you wanted five items per row.
Here's your revised code:
jsFiddle
.flex-container {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.flex-boxes {
/* flex-grow: 1; <-- REMOVE */
flex: 0 0 33.33%; /* NEW */
border: 2px solid red;
/* box-sizing: border-box; you may need to add this property if
you enable wrapping */
}
.cat {
width: auto;
/* vertical-align: bottom; add this property if you want to remove
the small gap of whitespace underneath images
https://stackoverflow.com/a/31445364/3597276 */
}
<div class="flex-container">
<div class="flex-boxes">A</div>
<div class="flex-boxes">
<img class="cat" src="http://www.publicdomainpictures.net/pictures/30000/velka/annoyed-cat.jpg" />
</div>
<div class="flex-boxes">C</div>
</div>
Learn more here:
flex-grow not sizing flex items as expected
I have a column that automatically fills its height using flexbox, and within this I have 4 items that I want to each be 25% of the height of their container.
I've created this fiddle to show my current code: https://jsfiddle.net/fc66rfo3/1/
I want the blue boxes on the right to each be 25% of the height of their yellow container.
I've been using this answer: https://stackoverflow.com/a/23442782/3909886 to try and make my code work, but the items just don't seem to want to flow as I want them to.
My main CSS trying to affect the heights looks like this:
.resources-links {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.col-1of1 {
height: 25%;
display: flex;
}
Don't worry. Just remove "height: 25%;display: flex;" and add "flex: 1;".
CSS:
Remove this
.col-1of1 {
height: 25%;
display: flex;
}
Add this
.col-1of1 {
flex: 1;
}
I want to set the width of the div elements' width accordingly depending on their container width. However, the number will be changed, so the width will need to be adjusted accordingly. Here is a CSSDeck link to explain the situation clearly:
http://cssdeck.com/labs/hvmkapkd
As you can see, both containers are identical (needed), also they have modular content (<div> elements) (which is also needed). Keeping the same structure, is it possible to auto adjust the width of the divs using CSS so that they fill up the whole container?
Then each item in the first container would have 33.333% width, and each item in the second container would have 20% width.
I found the solution right after posting the question.
Setting the .container elements as table and setting the colored content as table-cell made it.
Link is updated above, but here is the link once again anyway:
http://cssdeck.com/labs/hvmkapkd
Give the flex-box concept a chance (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
.container{
height: 100px;
width: 100px;
background-color: lightgray;
margin: 20px;
/* flexbox setup */
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
.container > div {
height: 100%;
/* flexbox setup */
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
(http://cssdeck.com/labs/full/hvmkapkd)