灵活布局的挑战与Flexbox的引入
在网页设计中，我们经常面临需要精确控制元素排列方式的需求。例如，将页脚中的一系列图片或链接从水平排列改为垂直堆叠，同时确保页面其他区域（如头部导航）的布局不受影响。传统的CSS布局方法，如float或position，在处理这种局部且灵活的对齐需求时，往往显得复杂且难以维护。
CSS Flexbox（弹性盒子模型）正是为解决这类一维布局问题而生。它提供了一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。通过Flexbox，我们可以轻松地实现元素的水平或垂直排列、对齐、顺序控制等功能。
使用Flexbox实现页脚内容的垂直排列
要实现将页脚内容垂直排列，同时保持整体页面布局的灵活性，我们可以将Flexbox应用于多个层级：首先是页面的主要容器（如body），其次是需要内部垂直排列的特定区域（如#footer）。
核心Flexbox属性
- display: flex: 将一个元素定义为Flex容器。一旦一个元素成为Flex容器，其直接子元素就变成了Flex项目，并可以利用Flexbox的各种属性进行布局。
-
flex-direction: 定义Flex项目在Flex容器中的排列方向。
- row (默认值): 项目沿主轴水平排列。
- column: 项目沿主轴垂直排列。
- align-self: 允许单个Flex项目覆盖其父容器的align-items属性，从而在交叉轴上进行独立的对齐。
逐步实现
假设我们的页面结构包含一个头部区域（#header）和一个页脚区域（#footer），其中页脚包含多个图片链接。我们的目标是让头部和页脚并排显示（例如，头部在左侧，页脚在右侧），并且页脚内部的图片链接垂直堆叠。
立即学习“前端免费学习笔记（深入）”；
1. 将body设置为Flex容器
首先，我们需要让#header和#footer能够并排显示。这可以通过将它们的父容器（body）设置为Flex容器来实现。默认情况下，flex-direction是row，这意味着#header和#footer将水平排列。
body {
display: flex; /* 使body成为Flex容器，其子元素#header和#footer将水平排列 */
}2. 垂直排列#footer内部内容
接下来，我们需要让#footer内部的图片链接垂直堆叠。我们将#footer自身也设置为一个Flex容器，并将其flex-direction设置为column。
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
#footer {
display: flex; /* 使#footer成为Flex容器 */
flex-direction: column; /* 将#footer内部的子元素垂直堆叠 */
}3. 对齐#header元素
在body作为Flex容器且flex-direction为row的情况下，交叉轴是垂直方向。如果需要调整#header在垂直方向上的位置，可以使用align-self属性。例如，align-self: center将使#header在其所在行中垂直居中。
#header {
align-self: center; /* 使#header在垂直方向上居中对齐 */
}示例代码
结合上述CSS规则和原始HTML结构，我们可以得到以下实现：
HTML结构 (关键部分):
CSS样式:
将上述CSS代码嵌入到
标签或单独的CSS文件中，并应用到相应的HTML结构中，即可实现预期的布局效果：#header和#footer并排显示，且#footer内部的图片链接垂直排列。注意事项
- 浏览器兼容性: Flexbox在现代浏览器中得到了广泛支持（IE10+，并带有前缀）。对于旧版浏览器，可能需要使用前缀或提供备用方案。
- 主轴与交叉轴: 理解Flexbox中的主轴（flex-direction决定）和交叉轴概念至关重要。Flex项目沿主轴排列，并在交叉轴上对齐。
- Flex项目属性: 除了容器属性，Flex项目自身也有许多属性（如flex-grow, flex-shrink, flex-basis, order）可以进一步细化布局行为。
- 避免过度嵌套: 尽管Flexbox非常强大，但过度嵌套Flex容器可能会使CSS变得复杂。在设计布局时，应权衡Flexbox的便利性和代码的可维护性。
- 语义化HTML: 始终保持HTML结构的语义化，CSS只是负责样式和布局，不应改变内容的含义。
总结
CSS Flexbox为现代网页布局提供了强大且灵活的解决方案。通过简单地应用display: flex、flex-direction和align-self等属性，我们可以轻松地控制元素的排列方向和对齐方式，实现复杂的布局需求，如将特定区域的内容垂直堆叠而不影响页面其他部分。掌握Flexbox是前端开发者的必备技能，它能显著提高开发效率并改善布局的响应性。
