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中的各项按照您的描述对齐。

在此解决方案中，通过利用flexbox和提到的@DevLover之类的媒体查询，可以避免切换到Bootstrap。

* {
  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;
  }
}

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

4 个答案: