如何指定元素何时应该用 flexbox 包装？

Question

我有 2 个块包裹在弹性容器中。我指定了 flex-row 将换行，但是有什么方法可以清楚地指示元素何时换行？我想调整 flex-items 中的内容直到某个断点，然后才将它们换行。

代码看起来像这样：

.flex-row{
  display:flex;
  flex-wrap:wrap;
}

<div class='flex-row'>

  <div class="block1">

  <h2>Some title</h2>
  <p>Some text</p>
  </div>


  <div class="block2">

  <img src="img"/>
    
  </div>


</div>

感谢您的帮助。提前谢谢你。

Answer 1

您可以在方块上使用 min-width。这意味着它们将完全伸展，但是当屏幕尺寸将它们限制为 200px 时，该断点将导致它们环绕，并且它们的宽度将 never 低于200px.

另一种选择是仅在您想要的特定断点上应用 flex-wrap: wrap;，并使用 media-query。

为了进一步控制，您还可以查看 flex-basis：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

编辑：响应图像

一般来说，在大多数图像上包含这行代码是很好的：max-width: 100%; height: auto; 因为这将使图像 auto-responsive。 max-width: 100%; 强制图像永远不会从其容器中溢出，并且 height: auto; 调整图像高度以使其纵横比正确。尝试拖动屏幕尺寸，您会看到它的效果:)

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.block1,
.block2 {
  min-width: 200px;
}

.block2 img {
  max-width: 100%;
  height: auto;
}

<div class='flex-row'>

  <div class="block1">

    <h2>Some title</h2>
    <p>Some text</p>
  </div>


  <div class="block2">

    <img src="http://via.placeholder.com/350x350" />

  </div>


</div>

Answer 2

没有 flex-wrap 属性它不会换行，因此您可以使用媒体查询来准确定义何时换行元素。但是您还必须设置 flex-items.

的宽度

.flex-row {
  display: flex;
}

/* Wrap */
@media only screen and (max-width: 1023px) {
  .flex-row {
    flex-wrap: wrap;
  }
  
  .block1,
  .block2 {
    width: 100%;
  }
}

<div class='flex-row'>

  <div class="block1">
    <h2>Some title</h2>
    <p>Some text</p>
  </div>

  <div class="block2">
    <img src="http://via.placeholder.com/350x350"/>
  </div>

</div>

如何指定元素何时应该用 flexbox 包装？

How to specify when element should wrap with flexbox?

html

css

flexbox

编辑：响应图像