在前端开发中，常常需要使用分页器来展示数据，比如新闻列表、产品列表等等。而实现分页器布局的方法有很多，其中一种比较简单且直观的方法就是使用 CSS Flexbox。
Flexbox 布局简介
Flexbox （也称为弹性布局）是 CSS3 中新的一种布局方式，它提供了一种更加灵活的方式来对容器进行布局，避免了传统布局方法中固有的一些限制。由于 Flexbox 布局方式的出现，使得我们能够更加轻松地处理许多不易处理的布局，比如垂直居中等等。
要理解 Flexbox 布局，我们需要先理解 Flexbox 中的一些概念。Flexbox 将一个元素分为两种角色：容器（Flex Container）和项目（Flex Item）。Flex Container 是包含了我们所要布置的项目的父级容器，而 Flex Item 则是这些项目的子元素。
在 Flexbox 中，我们可以通过设置以下属性来控制 Flex Container 和 Flex Item 的布局方式：
display: flex;：设置元素为 Flex Container。flex-direction：设置 Flex Container 中项目的排列方向，有 row（横向）、column（纵向）、row-reverse（反向横向）、column-reverse（反向纵向）四种取值。justify-content：设置 Flex Container 中项目在主轴上的对齐方式，有 flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐，项目之间的间隔相等）和 space-around（每个项目周围有相等的间隔）五种取值。align-items：设置 Flex Container 中项目在交叉轴上的对齐方式，有 flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）、baseline（基线对齐）和 stretch（如果项目未设置高度或者设为 auto，将占满整个 Flex Container 的高度）五种取值。
以上涵盖了主要的 Flexbox 布局属性，如果想要更加深入地学习 Flexbox 布局，可以阅读 A Complete Guide to Flexbox。
实现分页器布局
在 Flexbox 布局中，我们可以将分页器的每个按钮看作是 Flex Item，而分页器则是 Flex Container。因此，我们可以使用 Flexbox 布局来快速实现分页器的布局效果。
下面是一个简单的示例代码，展示了如何使用 Flexbox 布局来实现分页器：
<div class="pagination"> <button class="pagination-button">1</button> <button class="pagination-button">2</button> <button class="pagination-button">3</button> <button class="pagination-button">4</button> <button class="pagination-button">5</button> </div>
-- -------------------- ---- ------- ----------- - -------- ----- ---------------- ------- ------------ ------- - ------------------ - -------- --- ----- -
在上面的示例代码中，我们使用 display: flex; 属性将 .pagination 元素设置为 Flex Container。接着，使用 justify-content: center; 和 align-items: center; 属性将分页器中的按钮在主轴和交叉轴上都居中对齐。最后，设置 .pagination-button 上的内边距，让按钮看起来更加美观。
通过上述代码，我们可以快速实现一个基本的分页器布局，如下图所示：
当然，如果想要一些更加复杂的分页器效果，我们可以将 Flexbox 布局和 CSS3 动画、JavaScript 等其他前端技术一起使用，来创造出更炫酷的分页器布局。
总结
Flexbox 布局是一种非常强大的布局方式，我们可以使用它来实现诸如分页器布局等等很多不同的布局效果。通过学习本文所提到的 Flexbox 布局属性，以及结合实际案例的练习，相信您也能够轻松地掌握 Flexbox 布局的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c596c968c7c53b076e128