对齐双重包裹的嵌套 flex

Question

我正在尝试构建一个包含图像和随附文本描述的响应式图库。图像和它们的文本应该并排放置在同一行，除非宽度太小并且所有内容都折叠成一列。我唯一的问题是，在单列模式下，我希望图像在左侧与较宽的文本对齐。其他一切都按照我的意愿完美对齐和居中。

我知道 flex 不应该做我想做的事，我尝试用网格替换内部 flex，但无法使其工作。我很乐意了解解决此问题的最简单方法（最好没有媒体查询），更一般地说，正确的方法是什么。最重要的是，我不想被要求引入新的任意数字，除了图像的宽度、文本元素的宽度和给定的间隙。我猜想这样的设计将是一个足够常见的用例，但显然缺乏正确的术语，我找不到参考实现。

https://jsfiddle.net/tj13y7sc

编辑： 在我看来最有前途的方向：

一个简单的解决方法：使图像与文本具有相同的宽度，并在它们位于同一行时使用负（？）边距来修复水平间隙。
正确的做法是：用网格替换内部柔性 - 但我无法让它一直不折叠。

4 列 - 好：

2 列 - 好：

1 列 - 未对齐：

.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

您的 img 宽度和 div 文本容器的宽度不同，请尝试保持相同，它会正确对齐。

或者如果您想要特定宽度的文本容器。然后使用媒体查询并将 flex-direction 更改为小屏幕的列。

Answer 2

用 div 包围 <img> 标签：

  <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">
.
.
.

并添加到 css:

    .image {
      width:360px
    }

像这样： https://jsfiddle.net/860c4tfj/

Answer 3

似乎添加下一个条件可能会成功 -

.flex_container_item img {
  border: 1px solid blue; /* just for test */
  margin-left: 0;
  margin-right: auto;
}

看这里：https://codepen.io/elicohenator/pen/MWjpgze

Answer 4

只需将第二个 class justify-content 更改为“left”即可：

.flex_container_item {
      display:flex;
      flex-wrap:wrap;
      justify-content:left;
      gap:64px;
    }

Here's what it looks like（这里还不允许上传图片..）

Answer 5

现在我只想告诉你，我在 <div class="image"> </div> 中绑定了 <img>，然后进行了一些 CSS 更改，还添加了媒体查询以提高响应能力。

我还在 CSS 文件中添加了我所做更改的注释。

以下是您想要的代码片段。

.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 6

我解决了！

使用名为“image”的 div 包装 img。
将 div“图像”宽度设置为 360px（与文本相同）- 这将修复单列模式，但现在装订线太大了 360-256=104px。
为了解决这个问题，我们向图像和文本添加 divs：margin: 0 -52px; - 这将修复 -52*2=-104 的间距，同时保持所有内容对称。
最后我们将 margin: 0 52px; 添加到 .flex_container_item，以抵消上一步对外边距的影响。

https://jsfiddle.net/yt0pfnje/

要点：

永不放弃。永不投降。我很惭愧地承认我为此投入了多少时间。但是，嘿，现在我知道如何使用 flex、grid 和 margins 了。
如果 gap 可以取负值，这会容易得多。有人可以帮助向规范提出这个建议吗？
我仍然无法让它与网格一起工作。由于自动填充的工作方式，我认为这是不可能的
CSS 坏了。应该不难吧。应该不会花这么长时间来解决。其他尝试的答案是由 first-class 网络专家建议的，他们仍然无法正确回答。我现在相信没有更简单的方法。不过应该有。

对齐双重包裹的嵌套 flex

Aligning a doubly wrapped nested flex

css

margin

gallery

flexbox