让孩子弯曲测量相同的高度和宽度不同的行答案

【问题标题】：Make child flex measure the same height and width different row让孩子弯曲测量相同的高度和宽度不同的行
【发布时间】：2020-09-04 07:17:15
【问题描述】：

我在 flex 容器中有 4 个项目。我想让它们中的 4 个具有相同的宽度和高度，但始终将它们放在 2 个不同的行中（因此是 2 X 2 网格）。

由于孩子在不同的flex容器中，他们不遵守flex-grow: 1;即使是同一行的孩子也不遵守规则。如果我将它们放在同一个容器中，它们会将自己放在同一行中，我需要 2 X 2 网格。

您可以在此处找到具有相同代码的 codepen：https://codepen.io/mongolhippie/pen/yLYQbVd?editors=1100

    .tile {
      display: flex;
    
      flex-direction: column;
      border: 2px solid #A97C50;
      border-radius: 20px;
      padding: 20px;
      margin: 25px;
      /* THESE 3 OPTIONS TO CONTROLL HAVING THE SAME SPACE FOR EVERY TILE */
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
      flex: 1;
    }
    
    .tile p {
      font-size: min(calc( 1.125vw + 1.2rem ), 3.9rem);
    }
    .flex-center{
        display: flex !important;
        justify-content: center !important;
        align-items: center;
    }
    
    .manual-link {
      text-decoration: none !important;
      color: var(--brown-dark);
    }
    
    .manual-link:hover {
      text-decoration: none !important;
      color: var(--brown-dark);
    }
    
    .icon-and-title{  
      display: flex;
      align-items: center;
    }
    
    .icon-and-title p{
      font-size: min(calc( 1.125vw + .9rem ), 3.9rem);
    }
    
    .icon-and-title img{
      max-width: 100%;
      height: auto;
      transition: all .3s;
      max-height: 80px;
      margin-right: 20px;
      margin-bottom: 10px;
    }

     <div class="flex-center">
          <a class="manual-link" href="/manuals/manual-it.pdf">
          <div class="tile">
            <div class="icon-and-title">
              <img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
              <p>ADMIN</p>
            </div>
            <div class="links-manuals">
              <p>For the administrator of the app</p>
            </div>
          </div>
          </a>
          <a class="manual-link" href="/manuals/manual-developers.pdf">
          <div class="tile">
            <div class="icon-and-title">
              <img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
              <p>DEVELOPERS</p>
            </div>
            <div class="links-manuals">
              <p>To upgrade the Code</p>
            </div>
          </div>
          </a>
    
    
        </div>
        <div class="flex-center">
          <a class="manual-link" href="/manuals/manual-design.pdf">
          <div class="tile">
            <div class="icon-and-title">
              <img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
              <p>DESIGNERS</p>
            </div>
            <div class="links-manuals">
              <p>Style guide</p>
            </div>
          </div>
          </a>
          <a class="manual-link" href="/manuals/ngo.pdf">
          <div class="tile">
            <div class="icon-and-title">
              <img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
              <p>NGOs</p>
            </div>
            <div class="links-manuals">
              <p>The project</p>
            </div>
          </div>
          </a>
        </div>

让它们具有相同宽度和高度的 2 X 2 配置的秘诀是什么？

非常感谢！

【问题讨论】：

标签： html css flexbox

【解决方案1】：

只需从 Flexbox 迁移到 CSS GRID。

所以像这样改变 CSS：

.flex-center{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

由于您在 2 个不同的行中处理布局，我们将使用 grid-template-columns。

fr 单元告诉网格必须具有相同宽度的“单元格”。

最好将类从 .flex-center 重命名为其他名称，因为您将使用 CSS GRID。

这里是更新的工作Codepen

【讨论】：

【解决方案2】：

Flebox 非常适合制作 1D 灵活容器（垂直或水平），并且当所有元素没有更多空间时也可以处理多行（而不是溢出容器）

但是它们是另一种主要用于二维柔性网格的显示类型。它叫grid，你应该看看this guid才能正确使用它。

默认情况下您想要一个 2D (2x2) 网格，使用起来会更容易，这是一个非常基本的网格，您可以设置它以便让列和行占用一半的可用空间（50 %)

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}

【讨论】：