CSS3 flexbox 实现布局居中与三列等高详解

本文介绍了如何利用CSS3的Flexbox模型实现水平垂直居中以及三列等高布局。Flexbox是一种现代的布局模式，它为复杂的网页布局提供了简洁的解决方案。 1. Flexbox基础知识 - 伸缩容器：通过设置`display`属性为`flex`或`inline-flex`，可以使一个元素成为伸缩容器。这个容器能够控制其子元素（伸缩项目）的布局。 - 伸缩项目：伸缩容器内的所有子元素都是伸缩项目，包括文本这样的匿名伸缩项目。 - 伸缩流方向：默认沿主轴（通常是x轴）排列伸缩项目，可通过`flex-direction`属性调整。 - 伸缩行换行：`flex-wrap`属性决定伸缩项目是否换行到下一行，默认不换行。 - 伸缩性：伸缩项目可以根据需要扩展或收缩，以填充或适应容器的可用空间。 2. 使用Flexbox实现水平垂直居中 - 设置`html`和`body`的高度和宽度为100%，确保全屏布局。 - 使用浏览器前缀 `-moz-box` 和 `-webkit-box` 以支持旧版浏览器。 - 应用`display: -moz-box` 和 `display: -webkit-box` 来启用Flexbox布局。 - 使用`-moz-box-align: center` 和 `-webkit-box-align: center` 使伸缩项目在主轴上居中。 - 使用`-moz-box-pack: center` 和 `-webkit-box-pack: center` 使伸缩容器在交叉轴上居中。 - 创建一个`content`类的元素，设置其尺寸和背景色，以展示居中效果。 3. 三列等高布局 - 在伸缩容器中，通过设置`flex: 1` 或类似的属性，可以使所有子元素等分剩余空间，从而实现等高布局。 - 当内容量不同导致子元素高度不一时，可以通过`min-height`设定最小高度，保持视觉上的等高效果。 - 可以使用`justify-content`和`align-items`属性调整伸缩容器中子元素的对齐方式，以达到理想的布局效果。 通过理解和运用这些Flexbox的基本概念，开发者可以轻松地创建响应式、灵活的网页布局，无论是实现居中对齐还是复杂的多列布局。随着浏览器对Flexbox的广泛支持，它已成为现代前端开发中不可或缺的一部分。