Menu
Is there anyway to allow flex items to grow in width but only in height when necessary. I love flexbox but find it painful that flex items in a row all grow to the same height even when there is not content to fill them and then display additional items further down the page. Ideally I would like flex items to arrange themselves into available space when previous items don't have sufficient content to fill the box and not leave a big space.
Is this my lack of knowledge or is it just not possible? If it's not possible, could the facility be added in updates etc.
(Sorry. I tried to upload diagrams to explain but my reputation isn't enough!)
[EDIT. Code added as request. Some style left to demonstrate the white space I want to be taken up by the other flex items.]
<!doctype html>
<html>
<head>
<style>
.content {
font-size: 2em;
width: 100%;
margin: 0px;
padding: 0px;
background-color: coral;
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
align-items: flex-start;
}
.flex-item {
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 0;
flex-basis:40vw;
background-color: rgba(255, 255, 255, 0.9);
border: 2px solid white;
border-radius: 2px;
margin: 2vmin;
padding: 2vmin;
}
</style>
</head>
<body>
<div class="content">
<div class="flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu venenatis nisi. Sed nec purus consectetur, sodales mi vel, efficitur arcu. Vivamus id congue quam. Fusce imperdiet bibendum egestas. Mauris porttitor risus id pharetra pharetra. Vivamus et lorem erat. Nullam ac nulla ex. Nulla sit amet semper ligula. Integer augue sem, pharetra in ex ut, finibus mollis neque. Integer vulputate dolor massa, a maximus sem vehicula malesuada. Morbi a nulla ornare, egestas nisl in, ultrices est. Integer ut maximus elit. Cras ac velit condimentum, dapibus dui quis, mattis ex.
</div>
<div class="flex-item"><img src="https://pixabay.com/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%">
</div>
<div class="flex-item">Vivamus semper at tortor a lacinia. Nulla a suscipit felis. Aliquam erat volutpat. Integer dignissim suscipit nibh a accumsan.Fusce gravida nisl nec elit placerat porta. Ut feugiat feugiat lorem nec commodo. Morbi porttitor vel sapien id tincidunt. Vivamus venenatis pellentesque tempus.
</div>
<div class="flex-item"><img src="https://pixabay.com"/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%"> </div>
</div>
</body>
</html>
Apparently my question is not clear enough! I will try and expand with the sites constraints but not being allowed to post a diagram doesn't help.
There are Flex item boxes containing text, images or both. Flex item boxes containing images scale to the available space. With high resolutions, text only boxes are the same width and height (square) so images scale ok (square) and all is chipper. However at say viewports of 400 px wide, the boxes containing just text, become long (say 200 x 1000px for sake of argument) and the image boxes are 200 x 200px (square). The next line is then display after the bottom of the flex item text leaving a big gap (say 800px high) below the image. Other flex boxes could fit in the space after the shrunk image but they don't move into the gap. Is that clear people who put the question on hold??
528
You should set height of html, body, . wrapper to 100% (in order to inherit full height) and then just set a flex value greater than 1 to .
It can be changed by using the flex-direction property. To use flexbox, we have to set display: flex or inline-flex to flex-container. By default, the height and width of a flex-container are set to auto. But we can define a fixed amount to them.
what you are looking for is the 'align-content' property which is default set to 'stretch' and justifies elements vertically (the cross-axis).
Opposed to 'justify-content', default 'flex-start' which justifies elements horizontally (main-axis).
'align-self', default 'auto', can be used to control individual items. In other cases giving the max-height and height properties the same value will work too.
Which option to use depends on your personal requirement.
A very good resource for background info: Codrops CSS Reference - Flexbox
@Sharon
I believe here is your answer. Essentially everything in your solution has a relative width and height. Thus your inner box too. Giving your 'flex-item' both a min and max height will prevent height resizing. You need to do some more stuff, so have a look at the code.
body {
overflow: hidden;
/* just for testing, remove */
}
.flex-content {
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
}
.flex-item {
flex: 1 1 40vw;
min-height: 50px;
max-height: 50px;
background-color: rgba(255, 255, 255, 0.7);
text-align: center;
border: 2px solid white;
border-radius: 2px;
margin: 2vmin;
padding: 2vmin;
background-color: #fce4ec; /* for testing*/
}<div class="flex-content">
<div class="flex-item">some text</div>
<div class="flex-item">some text data</div>
<div class="flex-item">some more text data</div>
<div class="flex-item">again some more text data</div>
<div class="flex-item">some text</div>
<div class="flex-item">some text data</div>
<div class="flex-item">some more text data</div>
<div class="flex-item">again some more text data</div>
<div class="flex-item">some text</div>
<div class="flex-item">some text data</div>
<div class="flex-item">some more text data</div>
<div class="flex-item">again some more text data</div>
</div>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
