引言
在前端开发中，针对大屏幕和小屏幕需要适配不同分辨率，通常会使用 rem 和 px 单位进行布局。其中 rem 是相对单位，可以根据根元素 html 的字体大小调整，而 px 则是固定单位，无法视窗大小自适应。使用 rem 和 px 组合布局时，频繁切换屏幕大小会导致布局失调，本文将介绍如何通过 Flexbox 布局实现 rem 和 px 单位组合布局的自适应。
Flexbox 布局简介
Flexbox 是 CSS3 中一种新的布局模式，它可以将容器中的子元素按照一定的规则排列、对齐和分配空间。Flexbox 布局有两个关键概念：容器（flex container）和项目（flex item）。容器是父级元素，项目则是容器的直接子元素，采用 Flexbox 布局后，容器负责布局，项目则根据容器规则进行排列。同时，容器和项目都有各自的属性，可以通过这些属性来控制布局。
解决 rem 和 px 共用布局
使用 rem 和 px 单位布局时，如果容器的宽度使用 rem 单位，会导致子元素使用 px 单位的样式出现偏移。解决这个问题的方法是，将容器的宽度改为使用 px，子元素的样式也改为使用 rem 或 em 单位。这种做法的问题是，当页面大小调整时，布局的自适应性较差，需要手动调整样式。下面以一个实例来展示如何使用 Flexbox 布局解决这个问题。
HTML 代码如下：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
CSS 代码如下：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------ ----- ----------------- ----- ------- ------ ---------- -- -- ----------- -- - ----- - ------ ------ ------- ------ ----------------- ----- ---------- ----- ------------- ----- ----------- ------- ------------ ------ ------ ------ -展开代码
上述代码中，容器 .container 设置了 Flexbox 布局，并设置了居中对齐。这个容器的宽度是 100% ，背景色为 #eee。子元素 .item 的宽度为 100px ，高度为 100px，背景色为 #ccc。其中，.item 使用了 font-size 为 14px 的字号。为了解决字号不一致的问题，可以通过设置 .container 中的 font-size 为 0，让子元素继承其字号大小。
效果图如下：
通过上述的代码和实例，我们可以看到，使用 Flexbox 布局后即使是 rem 和 px 单位共用的样式也可以实现自适应，并且调整布局也很方便。
Flexbox 布局的常用属性
Flexbox 布局的常用属性有：
- display：设置容器为 Flex 布局
- flex-direction：设置主轴方向
- justify-content：设置主轴对齐方式
- align-items：设置交叉轴对齐方式
- flex-wrap：设置子元素换行方式
- flex-flow：设置主轴方向和交叉轴方向
- align-self：设置子元素自身的对齐方式
- order：设置子元素排序
- flex-grow：设置子元素放大比例
- flex-shrink：设置子元素缩小比例
- flex-basis：设置子元素基准大小
- flex：设置子元素的缩放、分配和基础大小
使用以上属性，我们可以控制 Flexbox 布局的各种特性，实现自定义的布局效果。
结语
通过本文的介绍，我们了解了 Flexbox 布局的基本概念和使用方法，学会了如何通过 Flexbox 布局解决 rem 和 px 共用布局的问题。同时，也介绍了 Flexbox 布局的一些常用属性，帮助读者更好地掌握 Flexbox 布局的使用。希望本文对前端开发者有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6786fd224083a4caee02700e
