文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何填充页面网格并在单列中布局内容宽度？

问如何填充页面网格并在单列中布局内容宽度？
EN

Stack Overflow用户
提问于 2020-06-05 11:39:11
回答 1查看 36关注 0票数 0

我正在尝试为web开发创建flex box列。然而，我所做的只是生成了一列flex boxes。

有哪些基本的CSS代码可以验证div卡片是否始终填满页面网格，以及在宽度足够小的情况下，内容是否显示在单列中。

​

代码语言：javascript
复制
@charset "utf-8";

/*
      CSS Code
    */

section {
  display: flexbox;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

div.card {
  display: flex;
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
代码语言：javascript
复制
<!doctype html>
<html lang="en">

<head>
  <!--
      HTML Code  
       -->
  <meta charset="utf-8">
  <title>Coding Challenge 5-2</title>
  <link href="code5-2_layout.css" rel="stylesheet" />
  <link href="code5-2_flex.css" rel="stylesheet" />
</head>

<body>

  <h1>Social Media Sites</h1>

  <section>
    <div class="card">
      <header>
        <h1>Facebook</h1>
      </header>
      <img src="facebook.png" alt="Facebook" class="icon" />
      <footer>238,150 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>Twitter</h1>
      </header>
      <img src="twitter.png" alt="Twitter" class="icon" />
      <footer>48,871 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>Instagram</h1>
      </header>
      <img src="instagram.png" alt="Instagram" class="icon" />
      <footer>171,244 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>GooglePlus</h1>
      </header>
      <img src="google-plus.png" alt="GooglePlus" class="icon" />
      <footer>64,288 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>YouTube</h1>
      </header>
      <img src="youtube.png" alt="YouTube" class="icon" />
      <footer>Subscribe to our Channel</footer>
    </div>
    <div class="card">
      <header>
        <h1>Vimeo</h1>
      </header>
      <img src="vimeo.png" alt="Vimeo" class="icon" />
      <footer>Get the Vimeo Feed</footer>
    </div>
    <div class="card">
      <header>
        <h1>Skype</h1>
      </header>
      <img src="share.png" alt="Skype" class="icon" />
      <footer>Join a Skype Chat</footer>
    </div>
    <div class="card">
      <header>
        <h1>Pinterest</h1>
      </header>
      <img src="pinterest.png" alt="Pinterest" class="icon" />
      <footer>Create your Page</footer>
    </div>
    <div class="card">
      <header>
        <h1>Bloggr</h1>
      </header>
      <img src="bloggr.png" alt="Bloggr" class="icon" />
      <footer>Subscribe to our Feed</footer>
    </div>
    <div class="card">
      <header>
        <h1>Tumblr</h1>
      </header>
      <img src="tumblr.png" alt="Tumblr" class="icon" />
      <footer>Get Daily Updates</footer>
    </div>
    <div class="card">
      <header>
        <h1>Share</h1>
      </header>
      <img src="share.png" alt="Share" class="icon" />
      <footer>Share our Content</footer>
    </div>
    <div class="card">
      <header>
        <h1>E-mail</h1>
      </header>
      <img src="email.png" alt="email" class="icon" />
      <footer>E-mail Us!</footer>
    </div>
  </section>
</body>

</html>

​

css
flexbox
html
EN

回答 1

Stack Overflow用户

发布于 2020-06-05 11:51:20

​

代码语言：javascript
复制
@charset "utf-8";

/*
      CSS Code
    */

section {
  display: flex; /* Change from flexbox to flex */
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

div.card {
  display: flex;
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
代码语言：javascript
复制
<!doctype html>
<html lang="en">

<head>
  <!--
      HTML Code  
       -->
  <meta charset="utf-8">
  <title>Coding Challenge 5-2</title>
  <link href="code5-2_layout.css" rel="stylesheet" />
  <link href="code5-2_flex.css" rel="stylesheet" />
</head>

<body>

  <h1>Social Media Sites</h1>

  <section>
    <div class="card">
      <header>
        <h1>Facebook</h1>
      </header>
      <img src="facebook.png" alt="Facebook" class="icon" />
      <footer>238,150 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>Twitter</h1>
      </header>
      <img src="twitter.png" alt="Twitter" class="icon" />
      <footer>48,871 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>Instagram</h1>
      </header>
      <img src="instagram.png" alt="Instagram" class="icon" />
      <footer>171,244 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>GooglePlus</h1>
      </header>
      <img src="google-plus.png" alt="GooglePlus" class="icon" />
      <footer>64,288 followers</footer>
    </div>
    <div class="card">
      <header>
        <h1>YouTube</h1>
      </header>
      <img src="youtube.png" alt="YouTube" class="icon" />
      <footer>Subscribe to our Channel</footer>
    </div>
    <div class="card">
      <header>
        <h1>Vimeo</h1>
      </header>
      <img src="vimeo.png" alt="Vimeo" class="icon" />
      <footer>Get the Vimeo Feed</footer>
    </div>
    <div class="card">
      <header>
        <h1>Skype</h1>
      </header>
      <img src="share.png" alt="Skype" class="icon" />
      <footer>Join a Skype Chat</footer>
    </div>
    <div class="card">
      <header>
        <h1>Pinterest</h1>
      </header>
      <img src="pinterest.png" alt="Pinterest" class="icon" />
      <footer>Create your Page</footer>
    </div>
    <div class="card">
      <header>
        <h1>Bloggr</h1>
      </header>
      <img src="bloggr.png" alt="Bloggr" class="icon" />
      <footer>Subscribe to our Feed</footer>
    </div>
    <div class="card">
      <header>
        <h1>Tumblr</h1>
      </header>
      <img src="tumblr.png" alt="Tumblr" class="icon" />
      <footer>Get Daily Updates</footer>
    </div>
    <div class="card">
      <header>
        <h1>Share</h1>
      </header>
      <img src="share.png" alt="Share" class="icon" />
      <footer>Share our Content</footer>
    </div>
    <div class="card">
      <header>
        <h1>E-mail</h1>
      </header>
      <img src="email.png" alt="email" class="icon" />
      <footer>E-mail Us!</footer>
    </div>
  </section>
</body>

</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62207730

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档