I’m learning flexbox and trying to figure out how to do this layout but cannot figure it out.
There is a square image that should be pushed to the right side that resizes depending on the width of the page and gets smaller to match the height when the written content is stretched out.
On medium sizes the image should match the written content up until it is square in size.
Then anything more narrow than squares it should wrap to vertical view.
Then this is reversed on the next section.
I am hoping to do this in flexbox without media queries changing the flex direction. Is this even possible?? Maybe I’m missing something. Just trying to understand flex, sizing and wrap more deeply around these issues.
Widescreens
Mediumscreens
Mobile
Thank you for any help.
Tried a bunch of stuff, but mainly having the image get larger on wider widths not smaller.
Can’t get the image to match the height of the written content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
align-items: stretch;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
}
.left-box {
padding: 60px;
flex-grow: 1;
border: 1px solid darkturquoise;
}
.right-box {
aspect-ratio: 1 / 1 ;
flex-grow: 0;
border: 1px solid fuchsia;
display: flex;
justify-content: flex-end;
align-items: center;
width: auto;
}
.right-box img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<section class="main-box">
<div class="container">
<div class="left-box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est eum tempore aliquid sequi architecto, quis quisquam nemo pariatur. Voluptas tempore laboriosam inventore sapiente assumenda repellat eum tempora nulla ipsa illum.</p>
</div>
<div class="right-box">
<img src="squareimg.png" alt="">
</div>
</div>
</section>
</body>
</html>
mathcat is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.