CSS Flexbox 是 CSS3 引入的一个布局模型，可以很方便地实现响应式布局和排版。它可以让元素在容器中自由地伸缩、换行和对齐，适用于现代 Web 应用和设备的多种布局需求。本文将介绍如何实现跨浏览器兼容的 CSS Flexbox，包括方法和技巧。
什么是 Flexbox
Flexbox 是 CSS 中的一种新的布局模型，可以让我们更加轻松地实现响应式布局和排版。它可以让元素在容器中自由地伸缩、换行和对齐，并且可以应用于多种布局需求。Flexbox 最大的优点在于，它能够让我们更轻松地对容器中的元素进行布局，而不必担心容器的尺寸和内容的大小产生的影响。
CSS Flexbox 是用来实现基于弹性盒子的布局的。在传统的布局方法下，元素的位置和大小都是由浏览器自动计算和确定的。而使用 Flexbox，我们可以为容器和其中的每个元素指定一个或多个 Flexbox 属性值，从而改变元素在容器内的位置、尺寸和显示方式，让它们更加灵活和自适应。
如何实现跨浏览器兼容的 CSS Flexbox
实现跨浏览器兼容的 CSS Flexbox 可能不是一件容易的事情。因为不同的浏览器支持的 Flexbox 属性可能不同，而且也有一些浏览器可能根本不支持 Flexbox。下面是一些实现跨浏览器兼容的 CSS Flexbox 的方法和技巧。
1. 使用 flex 属性
使用 flex 属性可以让元素具有弹性效果，即元素可以根据容器内的可用空间自适应大小。flex 属性包括 3 个值：flex-grow、flex-shrink 和 flex-basis。其中 flex-grow 和 flex-shrink 用来控制元素的伸缩比例，而 flex-basis 用来设置元素在没有任何伸缩的情况下的尺寸。
-- -------------------- ---- ------- ------------------ - -------- ----- ---------- ----- - ------------- - ----- - - ---- ------- ------- -
在上面的代码中，.flexbox-container 是一个 Flexbox 容器，它的子元素 .flexbox-item 使用了 Flexbox 属性 flex: 1 1 30%。这个值表示，在容器内，所有子元素都具有相同的基础尺寸，同时可以伸缩，并按照 1：1 的比例分配可用空间。另外，由于 flex-wrap: wrap 的设置，元素在 flex 容器内超过一行时将自动换行。
2. 使用 justify-content 和 align-items 属性
justify-content 和 align-items 属性用于设置 Flexbox 容器中的子元素的对齐方式和排列方式。justify-content 控制元素在主轴方向上的排列方式，而 align-items 控制元素在交叉轴方向上的排列方式。
-- -------------------- ---- ------- ------------------ - -------- ----- ---------------- ------- ------------ ------- - ------------- - ------- ------- -
在上面的代码中，.flexbox-container 的子元素使用了 Flexbox 属性 justify-content: center 和 align-items: center。这个值表示，在容器内，所有子元素将在主轴方向上居中对齐，并在交叉轴方向上居中对齐。
3. 使用 flex-wrap 属性
flex-wrap 属性用于控制 Flexbox 容器中的子元素是否换行。当子元素超过容器的宽度时，我们可以设置 flex-wrap 属性来使子元素自动换行。
-- -------------------- ---- ------- ------------------ - -------- ----- ---------- ----- - ------------- - ----- - - ------ ------- ------- -
在上面的代码中，.flexbox-container 的子元素使用了 Flexbox 属性 flex-wrap: wrap。这个值表示，在容器内，所有子元素超过容器宽度时自动换行。另外，子元素使用 flex: 0 0 200px，表示不在容器内伸缩，并设置基础尺寸为 200px。
示例代码
下面是一个使用 CSS Flexbox 实现的跨浏览器兼容的响应式布局，包括头部、导航栏、内容区和底部。代码中使用了上面介绍的技巧和方法，可以很好地适应不同的设备和屏幕大小。
-- -------------------- ---- -------
-----------------------
---------------------
------
---- --------------------------
---- ---------------------------- ---- -------
---- ---------------------------- ---- -------
---- ---------------------------- ---- -------
---- ---------------------------- ---- -------
------
-------
------------------------- -------------------- ---- ------- ---- - ------- -- ------------ ------ ----------- ---------- ----- ------------ ---- - ------ - ----------------- -------- ------ ----- ----------- ------- -------- ----- - --- - ----------------- ----- -------- ----- - ---- - -------- ----- - ------------------ - -------- ----- ---------- ----- - ------------- - ----- - - ---- ----------------- -------- ----------- ------- ------- ------- - ------ - ----------------- ----- ------ ----- ----------- ------- -------- ----- -
总结
Flexbox 是一个很强大的 CSS 布局模型，可以帮助我们快速实现响应式布局和排版。我们可以使用上面介绍的方法和技巧，来实现跨浏览器兼容的 CSS Flexbox 布局。如果您想深入了解 Flexbox，请查看我们的其他文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4068148841e9894076d50