Aligning a doubly wrapped nested flex - css

Question

I am trying to build a responsive gallery with images and accompanying text descriptions. Images and their text should sit side-by-side on the same row, unless the width is too small and everything is collapsed to a single column. My only issue is that in the single column mode, I would like the images to be aligned on their left to the wider text. Everything else is perfectly aligned and centered as I want.
I understand that flex is not supposed to do what I want, and I tried replacing the inner flex with a grid, but could not make it work. I would be happy to learn both about the easiest way to fix this (preferably without media queries), and more generally, what would be the correct approach to this. Most importantly, I would not like to be required to introduce new arbitrary numbers, other than the width of the image, and of the text element, and the given gaps. I would have guessed that such a design would be a common enough use case, but apparently lacking the correct terminology, I could not find reference implementations.
https://jsfiddle.net/tj13y7sc
Edit: The most promising directions seem to me:
For an easy fix: Giving the image the same width as the text, and using a negative(?) margin to fix the horizontal gap when they are on the same row.
For the right way to do it: Replacing the inner flex with a grid - but i could not got it to not collapse all the time.
4 columns - good:
2 columns - good:
1 column - misaligned:
.flex_container {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:64px 128px;
}
.flex_container_item {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:64px;
}
.text {width:360px;}
<div class="flex_container">
<div class="flex_container_item">
<img src="https://via.placeholder.com/250" width=256>
<div class="text">
<h1>description1</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<img src="https://via.placeholder.com/250" width=256>
<div class="text">
<h1>description2</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<img src="https://via.placeholder.com/250" width=256>
<div class="text">
<h1>description3</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<img src="https://via.placeholder.com/250" width=256>
<div class="text">
<h1>description4</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

Answer 1

Just change the second class justify-content to "left" as:
.flex_container_item {
display:flex;
flex-wrap:wrap;
justify-content:left;
gap:64px;
}
Here's what it looks like (not allowed to upload images here yet..)

Answer 2

Your width of img and div container of text are different, try keeping it same and it will be properly align.
Or if you want that specific width of text container.
Then use media query and change flex-direction to column for smaller screens.

Answer 3

Seems like adding the next condition might do the trick -
.flex_container_item img {
border: 1px solid blue; /* just for test */
margin-left: 0;
margin-right: auto;
}
see here: https://codepen.io/elicohenator/pen/MWjpgze

Answer 4

Now I just wanting to know you that I bind <img> in a <div class="image"> </div> and then make some CSS changes, and also add a media query for the responsiveness.
I also add comments in CSS file what I have make change.
The following is the code snippet that you want.
.flex_container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 64px 128px;
}
.flex_container_item {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 64px;
}
.text {
width: 100%;
/*value change*/
max-width: 360px;
/*new property add*/
}
/*new code added*/
/*use 720px media width because we have to fix .image class width same as we have already set for .text class so that they align at the same edge. so now total width for both the blocks is 360px + 360px = 720px.*/
#media(max-width: 720px) {
.image {
width: 100%;
max-width: 360px;
}
}
<div class="flex_container">
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
<h1>description1</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
<h1>description2</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
<h1>description3</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
<h1>description4</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

Answer 5

surround the <img> tag with a div as such:
<div class="flex_container">
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
.
.
.
and add to the css:
.image {
width:360px
}
like this:
https://jsfiddle.net/860c4tfj/

Answer 6

Solved by me!
Wrap the img with a div named "image".
Set div "image" width to 360px (same as text) - this will fix single column mode, but now the gutter is too large by 360-256=104px.
To fix this we add to both image and text divs: margin: 0 -52px; - this will fix the gutter by -52*2=-104, while keeping everything symmetric.
Finally we add margin: 0 52px; to .flex_container_item, to cancel out the effect the previous step on the outer margins.
https://jsfiddle.net/yt0pfnje/
Takeaways:
Never give up. Never surrender. I am ashamed to admit how many hours I've put into this. But hey, now I know how to use flex, grid and margins.
This would have been so much easier if gap could take negative values. Can anybody help suggest this to the spec?
I still could not make it work with grid. I believe it is not possible due to the way auto-fill works
CSS is broken. It should not be so difficult. It should not take so long to solve. The other attempted answers were suggested by first-class web experts who could still not get it right. I now believe there is no simpler way. But there should be.