CSS Flexbox 布局是一种快速且灵活的布局方式，可以轻松创建响应式页面，其中横向 FAB 按钮是其应用之一。
什么是 Flexbox 布局
Flexbox 布局是在 CSS3 中引入的一种新的布局方式，可以为元素提供强大的弹性盒子容器，使它们可以在不同设备和屏幕大小下灵活地适应布局变化。使用 Flexbox 可以实现快速布局，避免使用浮动和定位的复杂问题。
Flexbox 布局的基础概念
弹性容器和弹性项目：Flexbox 布局将一个容器和它里面的项目分为两个部分，容器称为“弹性容器”，而里面的项目则称为“弹性项目”。
主轴和交叉轴：弹性容器有两个方向：主轴和交叉轴。主轴是弹性项目的排列方向，而交叉轴是垂直于主轴的轴线。
弹性容器的属性：弹性容器可以通过设置属性来控制弹性项目的排列方式，如
display:flex;、flex-direction: row;等。弹性项目的属性：弹性项目可以通过设置属性来调整它们在容器中的位置、尺寸和顺序，如
flex-direction: column;、flex:1;等。
Flexbox 布局的应用之一：横向 FAB 按钮
FAB 按钮（Floating Action Button）是 Material Design 中常见的图标按钮，通常用于主要操作和操作组。在网页设计中，横向 FAB 按钮是一种常见的设计模式，可以用于展示更多的操作或占据更多的页面空间。
实现横向 FAB 按钮的基础步骤如下：
步骤一：HTML 结构
使用 HTML 进行标记，首先需要创建一个 FAB 的容器（.fab-container），然后在容器内创建两个 FAB 按钮（.fab）。其中，第一个 FAB 按钮是主要的操作，而第二个按钮是更多操作的集合。
<div class="fab-container"> <button class="fab main-fab">+</button> <button class="fab sub-fab">+</button> </div>
步骤二：CSS 样式
使用 CSS 进行布局，通过对容器和项目的属性设置，可以实现横向 FAB 按钮的布局和样式。
首先需要在容器中设置 display:flex;，表示使用 Flexbox 布局。
.fab-container {
display: flex;
}接着，在容器中设置 justify-content: flex-end;，表示让 FAB 按钮沿主轴向右对齐。
.fab-container {
display: flex;
justify-content: flex-end;
}然后设置 .sub-fab 的 order: 1; 属性，表示让它排在第二个位置。
.sub-fab {
order: 1;
}最后设置 .main-fab 的 margin-right: 20px; 属性，表示让它距离右侧的 FAB 按钮有一定的距离。
.main-fab {
margin-right: 20px;
}完整的 CSS 样式如下：
-- -------------------- ---- ------- -------------- - -------- ----- ---------------- --------- - -------- - ------ -- - --------- - ------------- ----- -
步骤三：JavaScript 事件监听
在需要响应 FAB 按钮的点击事件时，可以使用 JavaScript 监听按钮的 click 事件来触发相应的操作。
-- -------------------- ---- ------- ----- ------- - ------------------------------------ ----- ------ - ----------------------------------- --------------------------------- -- -- - -- ------- --- -------------------------------- -- -- - -- ---------- ---
总结
本文讲解了 CSS Flexbox 布局的基础概念以及横向 FAB 按钮设计的实现步骤，这对于前端开发者来说具有很重要的意义。使用 Flexbox 布局可以快速灵活地构建响应式页面，而横向 FAB 按钮的应用也可以提高网页设计的效率和美观性。希望本文能够帮助读者更好地了解和应用 CSS Flexbox 布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a2e883add4f0e0ffafe18d