How do I automatically shrink flex child's height in flex-direction: column so they all fit in parent's height?
I tried flex-shrink but it didn't help.
Is it even possible?
Thank you in advance!
Edit
Edited the title.
Children are images, I need to automatically change their height so they fit within parent and cause no overflow.
Try using flex-wrap
.flex {
display: flex;
flex-wrap: wrap;
}
.bloc {
width: 200px;
height: 100px;
margin: 5px;
background-color: red;
}
<div class="flex">
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
<div class="bloc">HELLO</div>
</div>
Try this:
.flex {
display: flex;
}
.block {
width: 200px;
height: 100px;
margin: 5px;
border: 2px red solid;
max-height: 100%;
}
<div class="flex">
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
<img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
</div>
Related
I have a CSS issue here and I cannot figure out how to solve it.
I would like the .panel-extra-content section to have a scrollbar but it seems it is not working for some reason. Does anyone have an idea what I am doing wrong here? Thanks
.panel {
border: 1px solid black;
display: flex;
flex-direction: column;
width: 150px;
height: 60px;
}
.panel-content {
flex: 1 1 auto;
}
.panel-extra-content {
overflow-y: scroll;
}
.child {
height: 40px;
border: 1px solid red;
}
button {
height: 40px;
width: 100px;
}
<div class="panel">
<div class="panel-content">
<div class="info" tabindex="0"><span>Number</span></div>
<div class="panel-extra-content">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
</div>
<div class="panel-footer">
<button>hey</button>
</div>
</div>
in order for it to be scrollable, you need to add a height to the .panel-extra-content class, eg:
.panel {
border: 1px solid black;
display: flex;
flex-direction: column;
width: 150px;
height: 60px;
}
.panel-content {
flex: 1 1 auto;
}
.panel-extra-content {
overflow-y: scroll;
height: 100px;
}
.child {
height: 40px;
border: 1px solid red;
}
button {
height: 40px;
width: 100px;
}
<div class="panel">
<div class="panel-content">
<div class="info" tabindex="0"><span>Number</span></div>
<div class="panel-extra-content">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
</div>
<div class="panel-footer">
<button>hey</button>
</div>
</div>
So I am trying to align images one next to another with display flex but they're not working, tried a lot of things but none of them helped
.container {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.image {
width: 100%;
margin-right: 10px;
}
<div class="container">
<div class="image">
<img src="photo.jpg">
</div>
<div class="image">
<img src="photo.jpg">
</div>
<div class="image">
<img src="photo.jpg">
</div>
<div class="image">
<img src="photo.jpg">
</div>
</div>
You need to remove
width: 100%;
from your .image styles.
Working Example:
.container {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.image {
margin-right: 10px;
}
<div class="container">
<div class="image">
<img src="photo.jpg">
</div>
<div class="image">
<img src="photo.jpg">
</div>
<div class="image">
<img src="photo.jpg">
</div>
<div class="image">
<img src="photo.jpg">
</div>
</div>
Update:
Do you want a single row of 4 images? If so, you'll need to give each image a width or a flex-basis of equal to or less than 25% of the .container.
Otherwise an image will be assumed to have a width corresponding to its original size.
You can achieve this by inserting .image {flex: 0 1 25%;} into your CSS:
.container {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.image {
flex: 0 1 25%;
margin-right: 10px;
}
I'm trying to fill an area of web page of a certain, fixed size with an unknown number of images (max 10), maximising the size of the images without overflowing the area. To be mobile friendly, I want it to work both in landscape and portrait mode without needing scrolling.
I've been trying to use flexboxes to have the images wrap, but then they don't scale down and end up overflowing the area. If I use non-wrapping flexboxes, the images scale in landscape mode, but not in portrait. I feel there should be a nice, simple solution to this. Any ideas?
Update:
Here's the essence of the code I've got so far. I've been trying a lot of different things, but this is the cleanest.
html {
height: 100%;
}
body {
padding-top: 0;
padding-bottom: 0;
height: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
text-align: center;
}
.above {
margin-bottom: 20px;
font-size: larger;
background-color: lightgrey;
}
.middle {
flex-grow: 1;
max-height: 100%;
}
.below {
margin-top: 20px;
background-color: lightgrey;
}
img {
border: 5px solid transparent;
height: 100%;
}
.images {
flex-direction: row;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 100%;
}
.image {
margin: 5px;
}
<html>
<body>
<div class="container">
<div class="above">
Some text about the images
</div>
<div class="middle">
<div class="images">
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
</div>
</div>
<div class="below">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>
The point is to try to get the images to stay completely within the div called "middle", but scaled as large as possible. Here are a few wireframes.
Landscape, 10 images:
Portrait, 10 images:
Portrait, 4 images
I Think you need to consider flex property here, it's the short hand version of flex-grow, flex-shrink, and flex-basis properties. See if this is what you're looking for.
html,body{
padding: 0;
margin: 0;
width: 100vw;
box-sizing: border-box;
}
.container{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.row{
display: flex;
width: 100%;
flex-direction: row;
}
.col{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
.item{
display: flex;
max-width: 100%;
height: 150px;
background-color: #222;
margin: 1%;
flex: 1 1 15%;
}
#media only screen and (max-width: 600px) {
.item {
height: 100px;
flex: 1 1 45%;
max-width: 100%;
}
}
<div class="container">
<div class="row ">
<div class="col">
<h1>some text about images</h1>
</div>
</div>
<div class="row">
<div class="col">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="row">
<div class="col">
<p>Some other elements</p>
</div>
</div>
</div>
I have a simple flexbox layout like this:
html, body {
margin:0;
padding:0;
background:grey;
}
.container {
display:flex;
flex-direction:row;
}
.image1, .image2, .image3, .image4, .image5, .image6 {
padding:10px;
}
img {
max-width:100%;
}
<div class="container">
<div class="image1">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image2">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image3">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
<div class="container">
<div class="image4">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
<div class="container">
<div class="image5">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image6">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
I am currently doing it with 3 seperate flex containers, I am trying to combine everything in to 1.
Am I able to do this with flexbox or would CSS grid be more appropriate?
Am I able to do this with flexbox
Yes, using flex-wrap property and wrap value, which will force items to wrap onto multiple lines.
html, body {
margin: 0;
background: grey;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.image {
padding: 10px;
box-sizing: border-box;
}
img {
width: 100%;
}
.third {
width: 33.333%;
}
.half {
width: 50%;
}
.full {
width: 100%;
}
<div class="container">
<div class="image third">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image third">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image third">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image full">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image half">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image half">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
You could make it even shorter, using flex instead of width.
html, body {
margin: 0;
background: grey;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.image {
flex: 1 0 0;
padding: 10px;
box-sizing: border-box;
}
.image.full {
flex: none;
width: 100%;
}
img {
width: 100%;
}
<div class="container">
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image full">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
The layout (with a single container) is relatively easy and simple using CSS Grid.
Use Grid's line-based placement techniques to position grid items and create grid areas.
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
.image1, .image2, .image3 {
grid-column: span 2;
}
.image4 {
grid-column: 1 / -1;
justify-self: center; /* optional */
}
.image5, .image6 {
grid-column: span 3;
}
img {
max-width: 100%;
}
body {
margin: 0;
padding: 10px;
background: grey;
}
<div class="container">
<div class="image1">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image2">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image3">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image4">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image5">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image6">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
jsFiddle demo
Is it possible to make the following layout just with Flexbox? Or what would be the recommended way?
Example code (getting images from an API):
<div class="container">
{images.map(image => {
return(
<div class="item">
<img src={image.thumbnail} />
</div>
);
})}
</div>
Example CSS:
.container {
display: flex;
flex-flow: row wrap;
}
img:nth-child(3) {
flex: 1 100%;
}
Simply set flex-basis: 100% to your third flex item
An additional rule setting the img to width: 100% will make them size properly.
Also, for best cross browser support, keep the wrapper around each img
.container {
display: flex;
flex-flow: row wrap;
}
.item {
background: lightgray;
flex-basis: calc(50% - 10px);
margin: 5px;
}
.item:nth-child(3) {
flex-basis: calc(100% - 10px);
}
.item img {
width: 100%;
}
<div class="container">
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
</div>
Maybe i don't understand correctly what you want, but here it is :
see jsFiddle or snippet below
.container {
display: flex;
flex-flow: row wrap;
}
img {
height:auto;
flex:1 50%;
}
img:nth-child(3) {
flex: 1 100%;
}
<div class="container">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
</div>
In your example you're doing img:nth-child(3) but your images are wrapped with an div. So your images are not the flex childs. Here is a possible solution to your problem:
.container {
display: flex;
flex-wrap: wrap;
}
.container div{
width: 50%;
/* just for demonstration, not needed: */
text-align:center;
margin-bottom: 10px;
background-color: #eee;
border: 2px solid white;
box-sizing: border-box;
}
.container div:nth-child(3) {
width: 100%;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Your CSS works, you just need an additional rule for the other images to get two each into the other rows, plus you can leave out the wrapping DIVs (if that's not possible/desired, just apply the same rules to the DIVs instead and set all image widths to 100%):
.container {
display: flex;
flex-flow: row wrap;
}
img {
box-sizing: border-box;
width: 50%;
padding: 10px;
}
img:nth-child(3) {
flex: 1 100%;
}
<div class="container">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
</div>