如何使用 CSS Flexbox 包装行项目？

Question

我是 CSS Flexbox 的新手，但我正在尝试创建一个水平卡片，其中图像在左侧，文本/按钮在右侧。当网站缩小（用于移动使用）时，行项目应该换行并且图像应该位于文本的顶部。我已经尝试将 wrap 属性设置为 wrap，但是当它应该只为较小的屏幕换行时，它会为大屏幕换行。见以下代码：

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
  <div id="inner-container">
    <div>
      <h3>Heading</h3>
      <br>
      <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>
      Other stuff
    </div>
  </div>
</div>

我应该尝试使用另一种方法（例如 Bootstrap 的卡片布局）还是我缺少明显的东西？

Answer 1

将flex-basis 设置为文本容器以控制何时发生换行。

全屏打开以下内容并调整大小查看：

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  
  flex-basis:500px;
  flex-grow:1;
}

<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
  <div id="inner-container">
    <div>
      <h3>Heading</h3>
      <br>
      <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>
      Other stuff
    </div>
  </div>
</div>

Answer 2

图片在左边。

文字在右边。

一旦第一行文本到达容器的右侧，整个项目将换行。

人们很容易认为一旦第一行到达右侧限制，文本就会自动换行。

这不是它的工作原理。

该触摸将触发整个项目的包装。

试试看：jsFiddle demo

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
}

#inner-container {
  border: solid 1px;
  display: flex;
  min-width: 0;
}

<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" width=50 height=50 alt="cat">
  <div id="inner-container">
    <p>Re-size the screen. Once this text touches the right side, the item will wrap.</p>
  </div>
</div>

使用媒体查询来控制包装行为。

Answer 3

假设我正确理解了您的问题，我相信我已经想出了类似于解决方案的方法。

我对您的代码稍作改动，并使用了flex-direction attritube。基本上我所做的是，当您使用桌面版本时，您的卡使用属性flex-direction: row 让您的 div 内的项目像您描述的那样对齐。

当您切换到移动版本时，我唯一要做的就是添加一个媒体查询，告诉 div 使用flex-direction: column，以便让您 div 中的项目像您描述的那样对齐。

在此解决方案中，您可以避免切换到 Bootstrap，通过使用 flexbox 和使用媒体查询（如提到的@DevLover）。

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  border: solid 1px;
  width: 70%;
  flex-direction: row;
}

#inner-container {
  border: solid 1px;
}

@media only screen and (max-width: 768px) {
    #outer-container {
        flex-direction: column;
    }
  }

<div id="outer-container">
        <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
        <div id="inner-container">
            <h3>Heading</h3>
            <br>
            <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>
                Other stuff
            </div>
        </div>
    </div>

希望这能解决你的问题！

Answer 4

HTML：

<div id="outer-container">
  <div class="content-wrapper">
    <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
    <div id="inner-container">
      <div>
        <h3>Heading</h3>
        <br>
        <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>
        Other stuff
      </div>
    </div>
  </div>
</div>

CSS：

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 100%;
  object-fit: cover;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 767px) {
  .content-wrapper {
    flex-direction: row;
  }

  img {
    width: 200px;
  }
}