介绍
作为前端开发者，响应式设计是不可或缺的技能之一。在过去，网页设计响应性主要通过 media query 和 float 样式来实现。而现在，有了 Flexbox 这个灵活的 CSS 布局模型，我们可以更加方便地完成响应式设计。
本文将介绍 Flexbox 布局的基础知识和实践方法，让你在 Web 开发中快速应用。
Flexbox 布局基础
Flex 容器
在 Flexbox 中，元素分为两个部分：容器和项目。容器是一个外围元素，包含一组项目。通过在容器上应用 display: flex，我们可以使用 Flexbox 布局模型。
.container {
display: flex;
}Flex 项目
容器中的每个子元素即为一个 Flex 项目。 Flex 项目可以通过在项目上应用 flex 属性进行布局。
.item {
flex: 1;
}在默认情况下，flex: 0 1 auto 即为项目的初始值。它表示项目不会被拉伸，但会收缩。如果需要，可以修改这些值来实现更精细的布局。
Flex 行布局和列布局
通过 flex-direction 属性，可以控制 Flex 容器中 Flex 项目的排列方向。默认情况下为横向排列，可以通过将值设为 column 来实现纵向排列。
.container {
flex-direction: column;
}Flex 主轴对齐和交叉轴对齐
通过 justify-content 属性，可以改变 Flex 容器沿主轴方向上的对齐方式。默认为居中对齐，也可以设置为左对齐、右对齐、空间等分等。
通过 align-items 属性，可以控制 Flex 容器沿交叉轴方向上的对齐方式。默认为居中对齐，也可以设置为顶部对齐、底部对齐等等。
Flex 自适应
通过 flex-wrap 属性，可以设置项目的排列方式。默认情况下，项目会尽量在同一行内排列。如果设为 wrap，则会在需要时自动换行。
通过 flex-flow 属性，可同时设置 flex-direction 和 flex-wrap。
.container {
flex-wrap: wrap;
}Flex 项目排序
通过 order 属性，可以为 Flex 项目赋予一个整数值，表示该项目的排列顺序。数值越小，越靠前，默认为 0。
.item {
order: 1;
}Flex 项目宽度
Flex 项目的宽度可以通过 flex-basis 和 flex-grow 属性来控制。其中，flex-basis 定义了项目的初始宽度，而 flex-grow 控制了项目在容器内的分配比例。
.item {
flex-basis: 100px;
flex-grow: 1;
}实践
Flexbox 实现导航栏响应式布局
下面是一个简单的例子，如何使用 Flexbox 将导航栏布局变为响应式。
HTML 代码：
<nav class="navbar"> <a class="link" href="#">Home</a> <a class="link" href="#">Services</a> <a class="link" href="#">Portfolio</a> <a class="link" href="#">About Us</a> <a class="link" href="#">Contact Us</a> </nav>
CSS 代码：
-- -------------------- ---- -------
------- -
-------- -----
---------------- --------------
------------ -------
---------- -----
----------------- --------
-------- -----
-
----- -
------ ------
---------------- -----
------- - -----
-
------ ------ --- ----------- ------ -
------- -
---------------- -------
-
----- -
------- -----
-
-其中， justify-content: space-between 将导航栏分别左对齐和右对齐，而 flex-wrap: wrap 则实现了在容器宽度不足时自动换行。在大屏幕设备下，导航栏按照原始方式布局；在小屏幕设备下，导航栏居中对齐并增加了外边距。
总结
Flexbox 提供了一种更加灵活和便利的布局方式，使得响应式设计更加容易实现。通过本文对 Flexbox 的介绍和实践，相信读者已经对 Flexbox 的基础知识和实践方法有了更深入的理解，希望读者在日常 Web 开发中能够灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c4c6a968c7c53b0e9c0a5