前言
CSS Flexbox 是一种强大的布局方式，使得前端开发变得更加灵活和方便。在使用 CSS Flexbox 的过程中，我们经常需要实现固定布局和自适应布局，本文将详细介绍这两种布局方式的区别，以及如何在实际项目中使用。
固定布局 vs 自适应布局
在传统的布局方式中，我们通常通过设置元素的宽度来实现固定布局或自适应布局。例如，我们可以设置一个固定宽度的 div 来固定其位置和大小，或者我们可以使用百分比来实现一个自适应的布局。但是这种方式有很多限制，而且需要使用复杂的媒体查询来实现响应式布局。
CSS Flexbox 提供了一种更加简单直观的方式来实现布局。在 Flexbox 中，我们将父元素设置为一个 Flex 容器，然后使用 flex 属性来控制子元素的位置、大小、排列等属性。可以通过设置容器的宽度和高度来实现固定布局，也可以通过设置容器的 flex 属性来实现自适应布局。
下面我们分别来介绍一下固定布局和自适应布局的实现方式和区别。
固定布局
固定布局是指将容器的宽度和高度固定在一个固定的值上，子元素的位置和大小也是固定的。在 Flexbox 中，我们可以通过设置容器的宽度和高度来实现固定布局。同时，我们可以使用 Flexbox 提供的 justify-content、align-items、align-self 等属性来控制子元素的位置和大小。
下面是一个简单的例子，用 Flexbox 实现的一个固定布局：
<div class="container"> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3">Box 3</div> </div>
-- -------------------- ---- ------- ---------- - ------ ------ ------- ------ -------- ----- ---------------- -------------- ------------ ------- - ---- - ------ ------ ------- ------ - ----- - ----------------- -------- - ----- - ----------------- -------- - ----- - ----------------- -------- -
在上面的例子中，我们先将容器的宽度设置为 600px，高度设置为 400px。同时，我们将容器的 display 属性设置为 flex，表示该容器为一个 Flex 容器。使用 justify-content 属性将子元素沿着主轴（横轴）方向分布在容器中，使用 align-items 属性将子元素沿着交叉轴（纵轴）方向居中对齐。我们还将子元素的宽度和高度都设置为 150px。
可以看到，在上面的例子中，容器的宽度和高度都是固定的，而且子元素的位置和大小也是固定的。这就是一个典型的固定布局示例。
自适应布局
与固定布局不同，自适应布局是指元素的大小会自动适应盒子模型的大小。在 Flexbox 中，我们可以通过设置 flex 属性来实现自适应布局。flex 属性是一个缩写属性，包括三个属性值：flex-grow、flex-shrink、flex-basis。其中 flex-grow 属性定义了子元素在主轴方向上的增长量，flex-shrink 属性定义了子元素在主轴方向上的收缩量，flex-basis 属性定义了子元素在主轴方向上的初始大小。
下面是一个简单的例子，用 Flexbox 实现的一个自适应布局：
<div class="container"> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3">Box 3</div> </div>
-- -------------------- ---- ------- ---------- - ------ ----- ------- ------ -------- ----- ---------------- -------------- ------------ ------- - ---- - ---------- -- ------- ------ - ----- - ----------------- -------- - ----- - ----------------- -------- - ----- - ----------------- -------- -
在上面的例子中，我们将容器的宽度设置为 100%，表示它的宽度将自适应父容器的大小。同时，我们使用了 flex-grow 属性将子元素宽度平均分配。可以看到，在这个示例中子元素的大小会自动适应其容器的大小，这就是一个典型的自适应布局示例。
总结
固定布局和自适应布局是前端开发过程中常用的两种布局方式。使用 CSS Flexbox 可以更加方便地实现这两种布局方式，使得前端开发变得更加简单和灵活。在实际项目中，根据实际需要选择固定布局和自适应布局的方式，可以使整个项目更加优秀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1a56db5eee0b5258e2563