Flexbox

Question

我正在使用 Flexbox 创建一个 6x6 方形网格。对于较小的 phone 屏幕，我需要正方形按比例调整大小以适应 div（主板）的宽度和高度。

如果不指定确切的高度和宽度尺寸，我似乎无法实现这一点。

这是我的fiddle：https://jsfiddle.net/zkunhqvs/1/

            <div id="main-board">
          <div id="game-board">
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
          </div>
        </div>

Answer 1

Flexbox 不是适合您任务的工具。考虑使用 CSS grid. It will save you a lot of time and provide cleaner code that is more responsive in your case. The advantages of CSS grid over flexbox can be found here，但我提请您注意：

The approach of CSS Grid is the layout first, while the Flexbox approach is primarily the content.

创建一个div容器<div id="main-board">
在 CSS 文件上使用 display:grid:

#main-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  height: (your value);
  width: (your value);
}

在 repeat(6, 1fr) 行中，我们指定应创建 6 行和列，占用一个 fractional unit. This allows the divs (grids) to occupy 1 fraction of the total space each. Thus, your grid will resize proportionally to the display - so long as your height and width declared in CSS allows the container to resize flexibly (min-height and min-width come to mind!). More specifically for resize responsiveness check out the CSS clamp function - 它允许您设置最小、最大 和理想大小 ;全部在一行中。

Flexbox – 调整浏览器大小时 div 的响应高度

Flexbox – Responsive height of divs when browser is resized

html

css