前言
随着移动设备和不同分辨率的出现，响应式设计（responsive design）变得越来越重要。在响应式设计中，我们可以使用多种技术来适应不同的屏幕尺寸和分辨率，其中两种最常用的技术是 Flex 和百分比。在本文中，我们将深入探讨这两个知识点，并提供示例代码和指导意义。
Flex
Flex 是一种 CSS 布局模式，可以快速、灵活地实现响应式设计。通过使用 Flex 可以轻松管理容器中的子元素，使它们在不同的屏幕尺寸和分辨率下能够自适应排列和缩放。
Flex 容器
Flex 布局以一个容器为基础，使用 display: flex 属性将该容器指定为 Flex 容器：
.container {
display: flex;
}在 Flex 容器中，所有子元素都将采用 Flex 布局，默认排列方式是从左到右。
Flex 项目
Flex 容器中的每个子元素都是一个 Flex 项目（Flex items），它们具有以下属性：
flex-grow：表示项目在剩余空间中所占的比例，该属性的值越大，代表项目在分配剩余空间时所占权重越大。flex-shrink：表示项目在空间不足时，缩小的比例。flex-basis：设置项目在分配多余空间之前的基础长度。可以是一个具体的长度值或比例。flex：是flex-grow、flex-shrink和flex-basis这三个属性的组合。
下面是一个示例，其中容器有三个子元素，它们的 flex-grow 值分别是 1、2、1，表示它们在剩余空间中所占比例为 1：2：1：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ------------------ - ---------- -- - ------------------ - ---------- -- - ------------------ - ---------- -- -
Flex 容器的其他属性
Flex 容器还有其他属性可以控制子元素的排列，例如：
flex-direction：表示子元素的排列方向，可以是 row、row-reverse、column、column-reverse。justify-content：表示子元素在容器内部的水平对齐方式，可以是 flex-start、center、flex-end 等。align-items：表示子元素在容器内部的垂直对齐方式，可以是 flex-start、center、flex-end 等。align-content：表示子元素在容器内部的行对齐方式，可以是 flex-start、center、flex-end 等。
百分比
在响应式设计中，使用百分比可以快速适应不同的屏幕尺寸和分辨率。百分比可以应用于元素的各种属性中，例如宽度、高度、边距、内边距等。
下面是一个示例，其中父元素的宽度是 500px，子元素的宽度为父元素的 50%：
<div class="parent"> <div class="child"></div> </div>
-- -------------------- ---- ------- ------- - ------ ------ - ------ - ------ ---- ------- ------ ----------------- ---- -
在不同的屏幕尺寸和分辨率下，子元素的宽度会自适应缩放以适应父元素。
总结
通过使用 Flex 和百分比，我们可以轻松实现响应式设计，使网页在多种设备和分辨率下都能够自适应。使用这两个技术时，需要注意它们的属性和使用方式，才能获得最佳的效果。
希望本文对大家有所帮助，一起来加强我们的前端技术吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5d314f6b2d6eab314dd04