使Flexbox响应 [英] Making flexbox responsive

问题描述

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

I'm using flexbox to create rows of 4 items.

调整屏幕大小时，所有内容都会变小，但是我还希望将行拆分为2行2行，而不是1行4行.最终，在很小的屏幕上排成1行.

When I resize screen, everything gets smaller, but I also want row to split up into to 2 rows of 2 instead of 1 row of four. And eventually, on really small screens into rows of 1.

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

I've tried setting different widths, margins and tried to use the @media rule in CSS but I can not get it to function properly.

非常感谢您的帮助.

代码:

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

推荐答案

您需要使用 @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>

工作小提琴此处

这篇关于使Flexbox响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！