點燈坊

失くすものさえない今が強くなるチャンスよ

佔據剩餘寬度

Sam Xiao's Avatar 2024-06-22

實務上常遇到只有一些 column 要指定寬度，但最後剩下的 column 自動佔據剩餘寬度即可，可用 calc() 或 flex = 1 達成。

Version

CSS 3

calc()

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lab</title>
  </head>
  <body>
    <main class="box">
      <div class="col1">row1</div>
      <div class="col2">row2</div>
    </main>
  </body>
  <style>
    :root {
      --col1Width: 50px;
    }

    .box {
      display: flex;

      .col1 {
        width: var(--col1Width);
      }

      .col2 {
        width: calc(100% - var(--col1Width));
      }
    }
  </style>
</html>

Line 15

:root {
  --col1Width: 50px;
}
  • --col1Width：定義 CSS 變數

Line 19

.box {
  display: flex;
}
  • display: flex：為了讓 <div> 水平排版，所以使用 flex

Line 22

.col1 {
  width: var(--col1Width);
}
  • width：使用 CSS 變數定義 column1 寬度

Line 26

.col2 {
  width: calc(100% - var(--col1Width));
}
  • width：使用 calc() 計算剩餘寬度

Flex

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lab</title>
  </head>
  <body>
    <main class="box">
      <div class="col1">row1</div>
      <div class="col2">row2</div>
    </main>
  </body>
  <style>
    .box {
      display: flex;

      .col1 {
        width: 50px;
      }

      .col2 {
        flex: 1;
      }
    }
  </style>
</html>

Line 15

.box {
  display: flex;
}
  • display: flex：為了讓 <div> 水平排版，所以使用 flex

Line 18

.col1 {
  width: 50px;
}
  • width：直接定義 column1 寬度

Line 22

.col2 {
  flex: 1;
}
  • flex: 1：相當於 flex-grow: 1，也就是將以 1 比例平分剩餘寬度

Conclusion

  • calc() 算最傳統寫法，透過計算方式佔據剩餘寬度
  • flex: 1 最較新寫法，利用 flex 的 flex-grow 以 比例 方式處理剩餘寬度

# CSS