在 Web 开发中，有时需要实现等高度且宽度不同的元素排列，对此常见的解决方案是使用 JavaScript 进行计算和布局。但实际上，CSS Flexbox 可以更为简便地实现此类布局。本文将介绍在 Flexbox 中实现等高度且宽度不同的元素排列的方法以及相关实例。
什么是 CSS Flexbox
CSS Flexbox 是一种 CSS 布局模块，用于更方便地实现自适应性强、可伸缩性好的布局，并且相较于传统布局方式，使用 Flexbox 不需要修改 HTML 结构或添加额外的容器元素。
Flexbox 的核心思想是将容器元素内的子元素作为一个弹性盒子，通过弹性盒子的各种属性和值来控制子元素的布局和排列。其中常见的属性包括 display, flex-direction, justify-content, 和 align-items 等。
实现等高度且宽度不同的元素排列
在传统布局中，等高度且宽度不同的元素排列需要使用 JavaScript 计算元素高度之后通过修改样式进行布局。而在 Flexbox 布局中，只需要在容器元素上添加以下样式即可实现：
.container { display: flex; flex-wrap: wrap; align-items: stretch; }
display: flex;表示将容器元素设为一个弹性盒子。flex-wrap: wrap;表示子元素个数超出容器宽度时自动折行。align-items: stretch;表示子元素高度自动填充容器高度。
具体的实现示例代码如下：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ------------ -------- - ----- - ------ ---- -------- ----- ------- --- ----- ----- ----------- ----------- -展开代码
其中 .item 表示容器中的子元素，设置 width 为 25% 可以实现元素宽度不同的排列。添加 padding 及 border 可以更直观地观察元素高度是否相等。
深度解析
弹性盒子布局模型
在 Flexbox 中，容器元素会被渲染为一个弹性盒子，弹性盒子具有以下特性：
- 弹性盒子具有主轴和侧轴两条轴线，其中主轴为弹性盒子的长轴，可通过
flex-direction属性设定。 - 主轴的起点和终点称为主轴起点和主轴终点，侧轴的起点和终点称为侧轴起点和侧轴终点，具体由
flex-direction决定。 - 弹性盒子中各个子元素默认沿主轴依次排列，可以通过
justify-content属性调整子元素在主轴上的对齐方式，包括flex-start、flex-end、center、space-between、space-around等。 - 子元素可以通过
order属性设定排列顺序，值越小排列越靠前。 - 弹性盒子默认不会改变子元素高度和宽度，可以通过
align-items和align-content属性控制子元素在侧轴上的对齐方式和高度，包括flex-start、flex-end、center、stretch、baseline等。
标准流布局和 Flexbox 布局的区别
传统的 Web 布局方式基于文档流模型，通过设置 display 和 position 等属性调整元素的位置和大小。
而使用 Flexbox 布局则是基于弹性盒子模型，在更加灵活的基础上能够更为方便地实现复杂的布局需求。
指导意义
- 等高度且宽度不同的元素排列是在 Web 布局中常见且重要的问题，通过使用 Flexbox 布局能够更简洁高效地解决问题。
- 在应用 Flexbox 布局时需注意各种属性和值的设置，包括
display,flex-direction,justify-content,align-items等等。 - 在实际应用中，Flexbox 布局可以与其他布局方式结合使用，以达到更为复杂的布局效果。
- 弹性盒子模型是未来 Web 布局的重要发展方向，掌握其基础知识能够更好地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc33eba231b2b7edda9ddc
