iwant the 3 image to be the same size and the same coordinate &also not to exceed the div border (black line)nor the main border(red line) …iuse flex display for the three boxes
One issue you are going to have is that you have two images that have a landscape orientation while the third image is portrait. which division did you apply flex to?
Better yet give the link to your pen that way we can examine your code
You’ve tried the following, right?
.thingholdingtheimage {
position: relative;
}
.imageinflexbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I may have messed something up there, not sure though because I’m sleepy xd
type or paste code here
2nd honey class
<div>
<section ><img class="img1" src="https://tse1.mm.bing.net/th?id=OIP.MRrxokmsNz3yo6F6yo1SzwHaHa&pid=15.1&P=0&w=300&h=300" >
</section>
</div>
</div>
here is the css :
.container{
display:flex;
height: 500px;
border: 1px solid red;
margin : 20px;
flex-wrap: ;
/* flex-direction: column; */
}
.container div{
background-color: #f1f1f1;
width: 33%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
text-decoration: None;
border: 1px solid;
/* display: table; */
}
@media(max-width: 800px;) {
/* flex-wrap: wrap;
flex-direction: column; */
}
.img1{
width: 80%;
height: 50%;
margin: 3px;
max-width: 100%;
}
/itried this to keep the photo in the container but it didn’t work/
.container div::after {
content: “”;
clear: both;
display: table;
}
to center items within the flex container add these lines to the existing css
align-items:center;
justify-items: center;
alignment refers to vertical placement while justification refers to horizontal.
read up on this article it is a great reference:
thanks alot bro
No, problem. Glad I could help. They also have an awesome article on css grid layout.