I'm trying to have 1 image on the top with 2 images below it spanning half the width of the image on top. The problem I'm encountering are aligning issues with the 2 images in which they don't fit nicely below the top image but spaced perfectly to the sides. I'm trying to have the 2 images be below the top image perfectly aligned in the center with no spaces below. As I shrink the window, that is when it looks like I want it to on a full screen except without the spaces. I also want them perfectly aligned in the center of the screen.
https://jsfiddle.net/voryuja8/
.first {
display: flex;
}
.first img {
margin: auto;
max-width: 800px;
}
.second {
display: flex;
}
.second img {
margin: auto;
flex: 1;
max-width: 400px;
}
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
Just remove margin:auto from the images and use justify-content: center in the flex containers.
.first {
display: flex;
justify-content: center;
}
.first img {
max-width: 800px;
}
.second {
display: flex;
justify-content: center;
}
.second img {
flex: 1;
max-width: 400px;
}
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
This might be a bit better, as it doesn't rely on setting pixel values for anything: https://jsfiddle.net/voryuja8/1/
HTML:
<div class="second">
<div class="flex-child">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
<div class="flex-child">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
</div>
CSS:
img {
max-width: 100%;
}
.second {
display: flex;
}
.flex-child {
flex-grow: 1;
flex-shrink: 1;
}
Related
Hi I am creating a website and I am trying to align a picture and some text vertically, but I am not being able to do this and the picture is only taking 100% space of the website, this is the code:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
The website is divided into 3 columns and I am putting the content on the middle one.
Shouldn't the display flex align them vertically? Why is it not working? Thank you in advance!
You need to set align-items:center on flex parent in order to vertically center its children. Check this for more details about flex-container, and this for more general info about flexbox
You can add justify-content:center for horizontal alignment.
Since you are using display: flex to the content div, add just the property align-items:center and your text will be centred vertically:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
align-items:center;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
In order to make it work, try to think with me ok? In order to you understand what is happening here:
First of all if you have a parent div its children should be one bellow one another
Your first step is to set the div to have flex: 1, flex check it out this website to learn more.
now set the items to be side by side with display: flex
set the same container with justify-content: center and align-items:center
and if you wish to align the div to the middle of your page, try this: margin: 0 auto
Here is where the magic happens: flex-direction: column, check the documentation flex-direction
I have a row of images that resize correctly in Firefox, but do not resize at all in Chrome. These images need to stay in a row and cannot fold under each other.
Any suggestions?
.image-rail {
display: flex;
justify-content: center;
width: 100%;
}
.image-rail img {
height: auto;
width: 100%;
}
<div class="image-rail">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
</div>
You've set the image-rail to display:flex; So that means that the childeren inside that flex can be set with a width that creates the "columns". Your images are the direct childeren of the flexbox. So if you want 4 of them next to each other the all need to be 1/4 of the total width of the flexbox aka 25%.
(Right now you've set a 100% and if you've had used a div it would have been the whole row for each div, but as it is a image the browsers see the 100%, but the images is smaller then the whole row so it sets it to 100% as in all the pixels the image contains.)
.image-rail {
display: flex;
justify-content: center;
width: 100%;
}
.image-rail img {
height: auto;
width: 25%;
}
<div class="image-rail">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
</div>
EDIT: Instead of using a fixed width, auto size your columns based on
the number of elements
If you want to have all the children of your flexbox to fit in one row, but you're not sure how many children there will be, then you're better of using a gridbox instead of a flexbox.
.image-rail {
display: grid;
grid-auto-flow: column;
width: 100%;
}
.image-rail img {
height: auto;
width: 100%;
}
<div class="image-rail">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
</div>
Try this one :
.image-rail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.image-rail img {
height: auto;
width: 100%;
}
or add flex-wrap: no-wrap to .image-rail
I have 3 image tiles (Image and Description) within a div element. I have used a flexbox such that all the 3 tiles are shown side by side in a row in full screen view. But when shown in a smaller screen, I want 2 of the tiles to be in the first row and the third tile to start a new second row. I tried it by giving the tile width 33% in the full screen case and width 50% in the smaller screen view but it isn't working mostly because I've made some mistake.
.container{
display: flex;
flex-direction: row;
}
.tile {
width: 33%;
}
.img {
width: 100%;
}
#media screen and (max-width: 685px) {
.tile{
width:50%;
}
<div class="container">
<div class="tile">
<img class="img" src="Sld1.jpg">
<p>Img1</p>
</div>
<div class="tile">
<img class="img" src="Sld2.jpg" >
<p>Img2</p>
</div>
<div class="tile">
<img class="img" src="Sld3.jpg">
<p>Img3</p>
</div>
</div>
<div class="container">
<div class="tile">
<img class="img" src="Sld1.jpg">
<p>Img1</p>
</div>
<div class="tile">
<img class="img" src="Sld2.jpg" >
<p>Img2</p>
</div>
<div class="tile">
<img class="img" src="Sld3.jpg">
<p>Img3</p>
</div>
</div>
<style>
.container{
display: flex;
flex-direction: row;
}
.tile {
width: 33%;
}
.img {
width: 100%;
}
#media screen and (max-width: 685px) {
.tile{
width:50%;
}
}
</style>
I cant quite figure out what to write in the media screen function such that in small screen view there are 2 tiles in upper row and the third div tile of container moves to another row below it. Please help me out with the CSS.
Set flex-wrap: wrap so the flex container will wrap at break points and then you can set up a class to break the wrap in media query with flex-basis. Just add that class to the div with the tile selector.
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.tile {
width: 33%;
}
.img {
width: 100%;
}
#media screen and (max-width: 685px) {
.tile {
width: 50%;
}
.break {
display: flex;
flex-basis: 55%; /* Change to 100% if you want it to fill up entire area under two images on top */
}
<div class="container">
<div class="tile two">
<img class="img" src="Sld1.jpg">
<p>Img1</p>
</div>
<div class="tile two">
<img class="img" src="Sld2.jpg" >
<p>Img2</p>
</div>
<div class="tile break">
<img class="img" src="Sld3.jpg">
<p>Img3</p>
</div>
</div>
All you need to do is to add flex-wrap: wrap inside your container class.
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
I'm doing some flex-grid and having problems getting inline images to scale their dimensions to match the height of a flex-grown box.
I have a flexbox column where I have a title and a wrapper that will grow to whatever space is leftover. Inside the wrapper is list of images that I would like to all have the same height and be inline. No matter what I do the images end up to the right of the title and outside the dimensions of the flexbox. Any help would be appreciated. Bad drawing included on what I would like vs what I currently get
Link to fiddle: https://jsfiddle.net/oan5fmtb/1/
<div class="container">
<h4>Title</h4>
<div class="imgs">
<img src="..." class="img">
<img src="..." class="img">
<img src="..." class="img">
<img src="..." class="img">
...
</div>
</div>
.container {
height: 170px;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.imgs {
flex: 1;
/* Not sure if I need anything else here */
}
.img {
display: inline;
/* Not sure what to do */
}
Please try this,
.container {height: 170px;width: 100%;border: 1px solid black;}
.imgs {display: flex;}
.img{width:60px;height:60px;margin-right: 10px;}
It works as expected
Found the solution thanks to this answer.
<div class="container">
<h4>Title</h4>
<div class="imgs">
<img src="..." class="img">
<img src="..." class="img">
</div>
</div>
.container {
height: 170px;
width: 100%;
display: flex;
flex-direction: column;
border: 1px solid black;
}
.imgs {
flex: 1;
min-height: 0;
border: 1px solid red;
}
.img {
height: 100%;
width: auto;
}
I found out that a flex item cannot shrink smaller than the size of their content, min-height: 0 will fix this.
I want an arbitrary number of images to shrink to fit inside a fixed-width div.
It seems that flexbox is good for this purpose, but I can't seem to get it to work with wrapping multiple rows.
If I set flex-flow to row wrap and flex to 1 1 auto, the images are too big.
.container {
display: flex;
flex-flow: row wrap;
border: 1px solid black;
width: 300px;
height: 300px;
}
.image {
flex: 1 1 auto;
}
img {
max-width: 100%;
}
<div class="container">
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
</div>
If I set flex-flow to just row or flex to 1 1 0, the images don't wrap onto multiple lines:
.container {
display: flex;
flex-flow: row wrap;
border: 1px solid black;
width: 300px;
height: 300px;
}
.image {
flex: 1 1 0;
}
img {
max-width: 100%;
}
<div class="container">
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
</div>
How can I make the images expand enough to wrap as much as possible to fill the div, but not so much they break out of it?
If I set flex-flow to row wrap and flex to 1 1 auto, the images are too big.
With flex-basis: auto your item will take the size of its content (the image, in this case). That's what you're getting in your first demo: The intrinsic width of the image.
If I set flex-flow to just row or flex to 1 1 0, the images don't wrap onto multiple lines.
With flex-basis: 0 your item will ignore content size and distribute all space in the row evenly among items. That's what's happening in your second demo: It's creating three equal width items. As a result, there is no reason to wrap.
To control the size of flex items you need to define their flex-basis. Here's a rough sketch:
.container {
display: flex;
flex-flow: row wrap;
align-content: flex-start; /* pack wrapping lines to the top */
border: 1px solid black;
width: 300px;
height: 300px;
}
.image {
flex: 0 0 30%;
margin: 5px;
}
img {
max-width: 100%;
}
<div class="container">
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="http://www.placebacon.net/400/300">
</div>
</div>
Just for fun.
var container1 = document.querySelector('.container1'),
container2 = document.querySelector('.container2'),
img = container2.querySelectorAll('.container2 img'),
width = 50,
stop = false;
expand();
function expand() {
for (var i = 0; i < img.length; i++) {
img[i].style.width = width + 'px';
}
if (stop) return;
if (container2.clientHeight < container1.clientHeight) {
width++;
setTimeout(function() {
expand()
}, 10);
} else {
width--;
stop = true;
expand();
}
}
.container1 {
border: 1px solid black;
height: 300px;
width: 300px;
}
.container2 {
font-size: 0;
}
<div class="container1">
<div class="container2">
<img src="http://www.placebacon.net/400/300">
<img src="http://www.placebacon.net/400/300">
<img src="http://www.placebacon.net/400/300">
</div>
</div>