CSS Flexbox 列溢出

Question

我想用 CSS flexbox 構建一個布局，但在構建計算器時遇到了問題。

我有一個#controller ，其中包含我在計算器上的所有按鈕。 “=”按鈕的大小是其他按鈕的兩倍（垂直方向）。

排版底部是這樣的（我上傳不了圖片）...

| 4 | 5 | 6 | / |
| 1 | 2 | 3 | = |
|。 | 0 | % | = |

所以我為普通按鈕創建了 div“行”，其中它們被設置為flex-grow: 1; 所以它對寬度保持響應。

我為左右“列”制作了一個名為“.bottom”的div 容器。 左邊包含行和正常大小的按鈕，右邊包含“=”按鈕。

問題：
.bottom部分內的兩列都從#controller中溢出了它們的內容。

我不一定要包裝我的布局。 我想也許我應該只創建列，而不是行，但在此之前我想征求意見。 先感謝您！

HTML 底部：

<div id="calculator">
  <!-- screen of calculator -->
  <div id="controller">
    <!-- upper part of button rows -->
    <div class="bottom">
      <div class="columnLeft">
        <div class="row">
          <div class="button">1</div>
          <div class="button">2</div>
          <div class="button">3</div>
        </div>
        <div class="row">
          <div class="button">.</div>
          <div class="button">0</div>
          <div class="button">%</div>
        </div>
      </div>
      <div class="columnRight">
        <div class="longButton">=</div>
      </div>
    </div>
  </div>
</div>

CSS

#calculator, #controller {
  display: flex;
  flex-direction: column;
}

#calculator {
  margin: auto;
  width: 50%;
}

#controller .row {
  display: flex;
}

#controller .bottom {
  display: flex;
  flex-direction: row;
}

#controller .bottom .columnLeft, #controller .bottom .columnRight {
  display: flex;
}

#controller .bottom .columnLeft {
  flex-grow: 3;
  flex-direction: column;
}

#controller .bottom .columnRight {
  flex-grow: 1;
}

.button, .longButton{
  flex-grow: 1;
}

Answer 1

只需將所有按鈕放在CSS-Grid中。 要讓一個元素占據 2 行，您可以在該元素上使用grid-row: span 2 。

 .calculator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; max-width: 200px; }.row-2 { grid-row: span 2; }

 <div class="calculator-grid"> <button>4</button> <button>5</button> <button>6</button> <button>/</button> <button>1</button> <button>2</button> <button>3</button> <button class="row-2">=</button> <button>.</button> <button>0</button> <button>%</button> <!-- empty for equal button --> </div>

Answer 2

CSS 格子是這里通往 go 的路。 您可以使用網格模板區域來跨越單元格，就像我在下面完成的計算器示例一樣。 這里有一本很棒的入門書，還有凱文·鮑威爾 (Kevin Powell)的精彩視頻

我已經舉了一個例子來幫助你開始。

 .bottom { display: grid; width: 50%; grid-template-columns: repeat(4, 1fr); grid-template-areas: "b4 b5 b6 bdiv""b1 b2 b3 bequals""bdot b0 bpercent bequals"; gap: 0.5rem; }.bottom>div { /* aspect-ratio: 1; */ background-color: lightgray; display: grid; place-items: center; padding-block:1rem; transition: background-color 0.2s; cursor: pointer; }.bottom>div:hover { background-color:darkgray; }.button-1 { grid-area: b1; }.button-2 { grid-area: b2; }.button-3 { grid-area: b3; }.button-4 { grid-area: b4; }.button-5 { grid-area: b5; }.button-6 { grid-area: b6; }.button-div { grid-area: bdiv; }.button-percent { grid-area: bpercent; }.button-dot { grid-area: bdot; }.button-long { grid-area: bequals; }

 <div id="calculator"> <.-- screen of calculator --> <div id="controller"> <!-- upper part of button rows --> <div class="bottom"> <div class="button-4">4</div> <div class="button-5">5</div> <div class="button-6">6</div> <div class="button-div">/</div> <div class="button-1">1</div> <div class="button-2">2</div> <div class="button-3">3</div> <div class="button-dot">.</div> <div class="button-0">0</div> <div class="button-percent">%</div> <div class="button-long">=</div> </div> </div> </div>