在前端开发中，实现宽高比固定的元素布局是一个常见的需求。比如，我们可能需要在一个网页中展示图片、视频等媒体元素，而这些元素的宽高比是固定的。在这种情况下，使用 CSS Flexbox 布局可以帮助我们轻松实现这个需求。
什么是 CSS Flexbox 布局？
CSS Flexbox 布局是一种基于弹性盒子模型的布局方式。它可以让我们轻松地实现灵活的、响应式的布局效果，同时也可以处理一些常见的布局问题，比如垂直居中、等高布局等。
Flexbox 布局的核心是“容器”和“项目”两个概念。容器是指我们要进行布局的元素，项目是指容器中的子元素。在 Flexbox 布局中，我们可以通过设置容器的属性来控制项目的布局方式。
如何实现宽高比固定的元素布局？
在实现宽高比固定的元素布局时，我们可以使用 Flexbox 布局中的“比例”属性来实现。具体来说，我们需要使用 flex-grow 和 flex-shrink 属性来控制元素的宽高比。
设置容器属性
首先，我们需要设置容器的 display 属性为 flex，这样才能启用 Flexbox 布局。然后，我们可以使用 flex-direction 属性来设置项目的排列方向。在这个例子中，我们将项目从左到右排列，因此设置为 row。
.container {
display: flex;
flex-direction: row;
}设置项目属性
接下来，我们需要设置项目的宽高比。我们可以使用 flex-grow 和 flex-shrink 属性来控制元素的宽高比。flex-grow 属性用于控制元素在可用空间中占据的比例，flex-shrink 属性用于控制元素在空间不足时的缩放比例。
在这个例子中，我们需要实现一个宽高比为 16:9 的视频元素。因此，我们可以将 flex-grow 属性设置为 16，flex-shrink 属性设置为 9，这样就可以实现宽高比为 16:9 的布局效果。
.video {
flex-grow: 16;
flex-shrink: 9;
}示例代码
下面是一个完整的示例代码，它可以实现一个宽高比为 16:9 的视频元素布局。
<div class="container"> <div class="video"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ------- ------ - ------ - ---------- --- ------------ -- ----------------- -------- -
在这个例子中，我们设置了容器的高度为 300px，这样就可以限制视频元素的最大高度。同时，我们也可以通过设置容器的 justify-content 和 align-items 属性来控制元素的水平和垂直居中。
.container {
display: flex;
flex-direction: row;
height: 300px;
justify-content: center;
align-items: center;
}总结
通过使用 CSS Flexbox 布局，我们可以轻松实现宽高比固定的元素布局。在实现过程中，我们需要设置容器的 display、flex-direction、justify-content 和 align-items 属性，同时也需要设置项目的 flex-grow 和 flex-shrink 属性。这种布局方式可以帮助我们实现灵活的、响应式的布局效果，同时也可以处理一些常见的布局问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65820bb1d2f5e1655dd3db8d