使 flexbox 响应式答案

【问题标题】：Making flexbox responsive使 flexbox 响应式
【发布时间】：2018-04-23 09:07:10
【问题描述】：

我正在使用 flexbox 创建 4 个项目的行。

当我调整屏幕大小时，一切都变小了，但我也希望将行分成 2 行而不是 1 行 4 行。最终，在非常小的屏幕上变成 1 行。

我尝试设置不同的宽度、边距并尝试在 CSS 中使用 @media 规则，但我无法使其正常运行。

非常感谢任何帮助。

代码：

.article-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  flex-flow: row wrap;
}

.articles {
  margin-top: 20px;
}

.articles h2 {
  width: 100%;
  margin-bottom: 20px;
}

.article {
  width: 22%;
}

.article img {
  width: 100%;
}

.article-title {
  font-weight: bold;
}

.article-creator {
  font-style: italic;
  margin-top: 5px;
}

          <section class="articles">
            <h2>Trending</h2>
            <div class="article-wrapper">
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
            </div>
          </section>

【问题讨论】：

只需使用媒体查询更新宽度，例如使其变为 45%
使用媒体查询。您可以将宽度指定为 50%，这样它们将是 2 行。但是您需要指定 flex-wrap 并且当您需要进入 1 列时，使它们的宽度为 100% 和父 flex-direction: column

标签： html css flexbox

【解决方案1】：

你需要使用@media来实现这个

.article-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  flex-flow: row wrap;
}

.articles {
  margin-top: 20px;
}

.articles h2 {
  width: 100%;
  margin-bottom: 20px;
}

.article {
  width: 22%;
}

.article img {
  width: 100%;
}

.article-title {
  font-weight: bold;
}

.article-creator {
  font-style: italic;
  margin-top: 5px;
}

@media screen and (max-width: 767px) {
  .article {
    width: 50%;
  }
}

<section class="articles">
            <h2>Trending</h2>
            <div class="article-wrapper">
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
            </div>
          </section>

工作小提琴here

【讨论】：

欢迎 :) @rpm192