在前端开发中，我们经常会用到宽度自适应的布局方式，如果不处理好，往往会出现在 iOS 上 Safari 中宽度计算错误的问题。这个问题是由于 Safari 计算元素宽度时，会将边框和内边距也计算在内，导致元素宽度过大。本文将介绍一种解决方案——Flexbox，并提供相应的示例代码。
正确的宽度计算方式
在介绍解决方案之前，让我们先来看一下正确的宽度计算方式。在计算元素宽度时，应该将它的边框宽度和内边距也计算在内，这样才能得到正确的实际宽度。例如：
.box { width: 200px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; }
这个示例中，.box 的实际宽度是 200px，包括了边框和内边距在内。
Flexbox 的解决方案
既然我们已经知道了正确的宽度计算方式，那么我们就可以用 Flexbox 来实现宽度自适应的布局。Flexbox 是一种布局方式，能够更加灵活地控制元素的宽度和高度，同时还可以解决各种布局问题。在这里，我们主要关注它解决 iOS Safari 中宽度计算错误的问题。
首先，我们需要将容器设置为 display: flex，这样容器里的子元素将会成为 Flexbox 布局方式。接着，我们可以将子元素的宽度设置为 flex: 1，这样子元素的宽度将会占满剩余的空间，以达到宽度自适应的效果。例如：
-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ----- -- ------- --- ----- ----- -------- ----- ----------- ----------- -展开代码
这个示例中，.box 的宽度会自适应其容器。同时，边框和内边距也被计算在内，所以实际宽度也是 200px。
总结
在 iOS 上 Safari 中宽度计算错误的问题，可以通过正确的宽度计算方式和 Flexbox 的布局方式来解决。Flexbox 可以更加灵活地控制元素的宽度和高度，同时还能解决各种布局问题，是一种非常有用的布局方式。如果你在开发中遇到了类似的问题，不妨尝试一下 Flexbox 的解决方案。
示例代码
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ----- -- ------- --- ----- ----- -------- ----- ----------- ----------- -展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6645dc39d3423812e43eaabd
