当我们进行页面布局时，经常会遇到侧边栏高度不固定的情况。这时候，我们可能希望侧边栏在页面中的位置不变，同时让其底部与主体内容的底部对齐。那么，如何实现这个需求呢？本文将介绍一种常用的解决方案——使用 Flexbox 布局。
Flexbox 简介
Flexbox 是一种新的 CSS 布局模式，它可以根据容器的大小和内容的大小自适应调整布局，使得设计响应式布局更加方便。Flexbox 的特点有以下几个：
- 可以指定父容器内子元素的对齐方式（水平／垂直居中、底部对齐等）。
- 可以自动调整子元素的尺寸和位置，以适应不同的设备屏幕大小。
- 可以指定不同元素的排列方向和排列顺序。
Flexbox 的基本概念包括容器（flex container）和子元素（flex item）。在 Flexbox 布局中，我们只需要指定容器的属性，就可以同时控制其内部的所有子元素。
Flexbox 实现侧边栏底部对齐
现在，我们开始使用 Flexbox 布局来实现侧边栏底部对齐的效果。具体实现步骤如下：
1. HTML 代码
假设我们的 HTML 结构如下所示：
<div class="main"> <div class="content"></div> <div class="sidebar"></div> </div>
其中，“main” 是一个包含主体内容和侧边栏的大容器，“content” 是主体内容的占位符，“sidebar” 是侧边栏的占位符。
2. CSS 代码
首先，我们需要给 “main” 容器设置 Flexbox 布局，并指定其排列方向为“row”，这里的“row”表示水平排列。同时，我们还需要定义一些基本样式，如下：
-- -------------------- ---- ------- ----- - -------- ----- --------------- ---- ------------ ----------- ---------------- ------- - -------- - ------------- ----- ------ ------ ------- ------ ----------------- ----- - -------- - ------ ------ ------- ----- ----------------- ----- -
这里，我们设置了“content” 的高度为 600px，并将“sidebar”的高度设为“auto”，以自适应内容高度。
接下来，我们需要使用 Flexbox 的一些特性来实现侧边栏底部对齐。主要的 CSS 代码如下：
-- -------------------- ---- ------- ----- - -------- ----- --------------- ---- ------------ --------- -- ----------- -- ---------------- ------- --------- --------- -- ------ -- - --------------- - -------- --- ----- -- -- ---------------- -- ------- ----- -- ------------ -- - -------- - ------------- ----- ------ ------ ------- ------ ----------------- ----- - -------- - ------ ------ ------- ----- ----------------- ----- --------- --------- ------- -- -- ------------------ -- -
这里，我们先将“main”容器的对齐方式align-items: flex-end; 修改为容器底部对齐。然后，我们在 “sidebar” 的前面添加了一个“before”伪元素，它的“flex: 1”属性将占据“content”元素的剩余空间，实现了两个元素的对齐。最后，我们将“sidebar”的position设置为“absolute”，然后通过bottom: 0 固定在“main”容器底部，即可实现我们想要的效果。
示例代码
最终的示例代码如下所示：
<div class="main"> <div class="content"></div> <div class="sidebar"></div> </div>
-- -------------------- ---- ------- ----- - -------- ----- --------------- ---- ------------ --------- -- ----------- -- ---------------- ------- --------- --------- -- ------ -- - --------------- - -------- --- ----- -- -- ---------------- -- ------- ----- -- ------------ -- - -------- - ------------- ----- ------ ------ ------- ------ ----------------- ----- - -------- - ------ ------ ------- ----- ----------------- ----- --------- --------- ------- -- -- ------------------ -- -
总结
Flexbox 布局是一种非常方便、灵活的页面布局方式，能够轻松实现各种复杂的布局要求。在实现侧边栏底部对齐的情况下，我们只需要简单地设置容器的一些属性和一些基本的 CSS 样式，就能够实现这个效果。希望本文能够对你有所帮助，让你更好地掌握 Flexbox 布局的使用方法，提高自己的页面开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b0c31968c7c53b0a7d611