前言
Flexbox 是一种非常有效的布局方式，可以简化我们在前端开发中的很多工作，但是在使用 Flexbox 进行布局时，很容易遇到一些尺寸计算的问题，这时候就需要用到 calc() 函数。
calc() 函数可以帮助我们在进行尺寸计算时，在 CSS 中使用数学表达式，这样就可以更加灵活地控制元素的尺寸。
本文将详细介绍在 Flexbox 中使用 calc() 函数的正确方法，希望对你有所帮助。
calc() 函数的基本用法
calc() 函数的基本语法为：
calc(expression)
其中，expression 表示一个数学表达式，可以包含加、减、乘、除等基本运算符，例如：
calc(100% - 20px)
在 Flexbox 中，使用 calc() 函数可以帮助我们更精细地控制子元素的尺寸。
在 Flexbox 中使用 calc() 函数的示例
下面是一个使用 Flexbox 进行布局的示例：
<div class="container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------ ----- ------- ------ ----------------- -------- - ------- ------ - ------- ----- ----------------- ----- ------- --- ----- ----- - ------ - ----- - - ---- - ------ - ----- - - ----- -
在这个示例中，我们使用 Flexbox 将容器分成两个部分，左边的列占据 60% 的宽度，右边的列占据剩余的空间。
但是，当我们在 .item1 或 .item2 中使用 calc() 函数时，就需要注意两个问题。
问题一：不要直接使用百分比
在 Flexbox 中，当父元素的宽度是有单位的值（如 100px、10rem 等）时，子元素的宽度可以使用百分比（如 50%、30% 等）来表示相对于父元素的尺寸。但是，当父元素的宽度是没有单位的值（如 flex、auto 等）时，子元素的宽度不能使用百分比。
因此，如果我们想要在 .item1 中使用 calc() 函数来计算它的宽度，就不能直接使用百分比。例如，下面的代码是错误的：
.item1 {
flex: 0 0 calc(50% - 10px); /* 错误 */
}因为在这个示例中，父元素 .container 的宽度是 flex（即自适应宽度），不能直接使用百分比，需要使用 em、rem、px 等具体单位。
问题二：子元素的宽度不能超过父元素的宽度
在 Flexbox 中，子元素的宽度不能超过父元素的宽度。这是因为在 Flexbox 中，子元素的宽度可以根据它们在 Flexbox 中的排列方式（主轴和交叉轴），动态地进行调整，如果子元素的宽度超过了父元素的宽度，就会导致 Flexbox 布局的混乱。
因此，如果我们想要在 .item1 中使用 calc() 函数来计算它的宽度，就需要记得减去 .item1 的 margin 和 border 的值，以确保 .item1 的宽度不会超过父元素的宽度。例如，下面的代码是正确的：
.item1 {
flex: 0 0 calc(60% - 2px); /* 正确 */
}总结
使用 calc() 函数可以帮助我们在 Flexbox 中更加精细地控制子元素的尺寸，但是在使用 calc() 函数时，需要注意两个问题：
- 不要直接使用百分比；
- 子元素的宽度不能超过父元素的宽度。
在实际开发中，我们需要按照这些要点来正确使用 calc() 函数，以避免出现意想不到的布局问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64851d8948841e989440ba60