CSS Flexbox 布局是一种流行的布局方式，它可以用于创建响应式的、灵活的布局。但是，在 Flexbox 布局中，有时候需要设置子元素的高度，以满足特定的设计需求。本篇文章将介绍如何在 CSS Flexbox 布局中设置固定高度的子元素。
Flexbox 布局简介
在讲解如何设置固定高度的子元素之前，让我们先简单回顾一下 Flexbox 布局的基础知识。
Flexbox 布局是一种一维（单行或单列）的布局方式，它的主要思想是使用容器和项目两个角色来实现布局。容器是需要进行布局的元素，项目则是容器中的子元素。Flexbox 布局通过给容器设置一系列的属性来控制项目在容器内的排列方式。
以下是一些常见的 Flexbox 属性：
display: flex;：将容器设置为 Flexbox 布局。flex-direction: row/column;：设置主轴方向为水平或垂直。justify-content: flex-start/center/flex-end/space-between/space-around;：设置主轴上的对齐方式。align-items: flex-start/center/flex-end;：设置交叉轴上的对齐方式。
设置固定高度的子元素
在 Flexbox 布局中，子元素是不会自动设置高度的，而是根据内容自适应高度。但是，在某些场景中，我们需要强制设置子元素的高度。
为了实现这个目标，有两种常见的方法：使用绝对定位或者使用 Flexbox 属性。
使用绝对定位
使用绝对定位可以将子元素强制设置到指定的高度，但是这种方法需要将容器元素设置为 position: relative;，同时也会使其他项目的布局受到影响。
示例代码如下：
-- -------------------- ---- ------- ---------- - --------- --------- - ------ - --------- --------- ---- -- ----- -- ------ ----- ------- ----- -
在上面的代码中，我们先将容器元素设置为相对定位，然后将子元素设置为绝对定位，并设置宽度为 100%，高度为 50 像素。
使用 Flexbox 属性
使用 Flexbox 属性可以更加灵活地控制子元素的高度，同时不会影响其他项目的布局。
以下是一些常用的 Flexbox 属性：
flex-basis: auto/px/%/rem;：设置项目的占据空间。flex-grow: 0-1;：设置项目的放大比例。flex-shrink: 0-1;：设置项目的缩小比例。
示例代码如下：
-- -------------------- ---- ------- ---------- - -------- ----- - ------ - ----------- ----- ---------- -- ------------ -- -
在上面的代码中，我们给子元素设置了 flex-basis: 50px;，这样就实现了子元素的固定高度。同时，我们将 flex-grow 和 flex-shrink 都设置为 0，这样可以保证子元素不会因为其他项目的变化而改变高度。
总结
在本篇文章中，我们介绍了如何在 CSS Flexbox 布局中设置固定高度的子元素。使用绝对定位可以实现子元素的高度强制设置，但是会影响其他项目的布局；使用 Flexbox 属性则更加灵活，可以更好地适应不同的布局需求。在实际开发中，需要根据具体的场景选择合适的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492d88848841e98940a4629