html - 有没有办法让 flexbox 适合屏幕？

问题描述

我有 4 列，我需要使页面具有响应性，以便它可以折叠以在一个屏幕中容纳所有四列。现在，垂直监视器上的屏幕显示 2 个大列，并将另外两个推到一边，见下图。

如何更改我的 html/css 以便显示所有四列。如果该列可以相互折叠以适应下面的不同分辨率代码，那也没关系我尝试了 margin-bottom ， margin left ， margin-rifght 甚至 flexflow: row 。但我没有运气。我对 Web 开发非常陌生，如果有人可以帮助我使页面响应监视器的不同分辨率，我想。它现在适用于 27 水平显示器，但不适用于 24 垂直显示器

    <!DOCTYPE html>
    <html lang="en">
<!--html  basic skeleton of the page -->
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="app.component.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
    
    <div class="container-fluid header mb-5">
    
      <div class="d-flex flex-row p-2 align-items-center title">
        <img src="../assets/logo.png" [width]="50" [height]="50">
        <a class="ml-3 title-text" href="/">Test</a>
      </div>
      <div class="d-flex flex-row banner">
        <a class="nav-text mx-3" href="/">Home</a>
        <a class="nav-text mx-3" href="/">Contact Us</a>
      </div>
    </div>
    
    <div class="container-fluid" >
      <div class="d-flex flex-row justify-content-around">
        <div class="d-flex flex-column">
          <h2 class="category"> Test </h2>
    
          <div class="card align-items-center justify-content-center">
            <i class="fa fa-sort-amount-desc fa-2x mb-3" aria-hidden="true"></i>
            <a href="/" target="_blank">Test2</a>
          </div>
    
          <div class="card  align-items-center justify-content-center">
            <i class="fa fa-filter fa-2x mb-3" aria-hidden="true"></i>
            <a href="/" target="_blank">Test3</a>
    
          </div>
        </div>
        <div class="d-flex flex-column">
          <h2 class="category">Analytics</h2>
    
          <div class="card align-items-center justify-content-center">
            <i class="fa fa-link fa-2x mb-3" aria-hidden="true"></i>
            <a href="/" target="_blank">Builder</a>
          </div>
    
          <div class="card align-items-center justify-content-center">
            <i class="fa fa-language fa-2x" aria-hidden="true"></i>
            <a href="/" target="_blank">Tool</a>
          </div>
    
          <div class="card align-items-center justify-content-center">
            <i class="fa fa-fire fa-2x mb-3" aria-hidden="true"></i>
            <a href="/" target="_blank">Engagement Map</a>
          </div>
        </div>
    
        <div class="d-flex flex-column">
          <h2 class="category">Other Tools </h2>
    
          <div class="card align-items-center justify-content-center">
            <i class="fa fa-newspaper-o fa-2x mb-3" aria-hidden="true"></i>
            <a href="/">C</a>
          </div>
    
          <div class="card align-items-center justify-content-center">
            <i class="fa fa-globe fa-2x mb-3" aria-hidden="true"></i>
            <a href="/" target="">G</a>
          </div>
        </div>
    
        <div class="d-flex flex-column">
          <h2 class="category">Documentation</h2>
    
          <div class="card align-items-center justify-content-center">
            <i class="fa fa-file-text-o fa-2x mb-3" aria-hidden="true"></i>
            <a href="/" target="_blank">P</a>
          </div>
    
          <div class="card align-items-center justify-content-center">
            <i class="fa fa-file-text-o fa-2x mb-3" aria-hidden="true"></i>
            <a href="/">D</a>
          </div>
    
        </div>
    
      </div>
    </div>
    
    
    </body>
    </html>

css for the page
    * {
      box-sizing: border-box;
    }
    
    
    body {
      font-family: 'EB Garamond', sans-serif;
    }
    enter code here
    i {
      color: #0A2240;
    }
    
    a {
      font-family: 'EB Garamond', sans-serif;
      color: #0A2240;
    }
    a:hover, a:active{
      text-decoration: underline;
    }
    
    .header {
      padding: 0;
    }
    
    .title {
      background: #0A2240;
      font-size: 25px;
    }
    
    .banner {
      padding: 10px;
      text-align: left;
      background: #b30000;
      color: white;
      font-size: 15px;
    }
    
    .title-text, .nav-text {
      color: white;
      font-family: "EB Garamond", sans-serif;
    }
    
    h2.category {
      color:#0A2240;
      text-align: center;
      font-size: 25px;
      text-align: center;
    }
    
    .card {
      box-shadow: 0 10px 8px 5px rgba(0, 0, 0, 0.2);
      width: 100%;
      min-width: 400px;
      height: 150px;
      padding: 20px;
      text-align: center;
      background-color: white;
      border-style:solid;
      border-color:#253746;
      border-radius: 25px;
      border-width: 2px;
      margin-bottom: 60px;
    
    
    
    }

现在是什么样子我希望它是什么样子

标签： htmlcssflexbox

html - 有没有办法让 flexbox 适合屏幕？

问题描述

解决方案

推荐阅读