本文共 1650 字，大约阅读时间需要 5 分钟。

一、为什么学习Flexbox布局

我记得很久以前就接触到了Flexbox布局，这个_LAYOUT在CSS中可是个神奇的存在。回想起来，那时候做PC端开发时，兼容IE8的需求让我们不得不对浏览器的差异性做出各种妥协。而到了移动端后，第一次真正深入了解Flexbox的优势时，我简直不敢相信这东西竟然如此简单高效。

Flexbox布局的学习之路上，最基础的属性值还是得掌握。flex-direction决定了子元素的排列方向，默认是行方向，改变的话就能让布局垂直化。flex-wrap则决定了如何处理超出容器的内容，默认是nowrap，适合单行排列的场景。flex-flow是两个属性的简写，前者决定排列顺序，后者决定排列方向。至于justify-content和align-items，这两个属性决定了子元素在排列过程中的对齐方式。

在布局中，flex属性的设置往往是我们经常用到的。flex:1表示占据剩余空间，flex:0则不占据，默认值是auto，适用于各种灵活布局需求。了解这些属性的组合方式，能够让我们轻松实现各种复杂的布局需求。

二、Flexbox布局的基本使用

在使用Flexbox布局时，父元素的display属性必须设置为flex。接下来，通过设置flex-direction和flex-wrap等属性，可以实现不同方向的布局。子元素的flex属性决定了它们在布局中的表现。例如，flex:1可以让子元素占据剩余空间，flex:0则不占据。

Flexbox的灵活性主要体现在对子元素的控制上。通过设置order属性，可以改变子元素的排列顺序。flex-grow则决定了子元素对空间的占有比例，默认是0，表示不占据空间。flex-shrink则决定了空间不足时的行为，默认是1，表示会缩小。flex-basis则是在分配空间前设定的基准大小，默认是auto。

Flexbox的灵活性不仅体现在空间的分配上，还体现在对齐方式的控制上。align-self属性可以为单个子元素设置对齐方式，从auto到flex-start、flex-end、center等多种选择，满足不同的布局需求。

三、Flexbox布局的圣杯布局示例

圣杯布局是一种常见的布局模式，使用Flexbox可以轻松实现。以下是实现圣杯布局的典型代码示例：

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
.header, .footer {
    flex: 0 0 80px;
    background-color: #7dbcea;
}
.container {
    flex: auto;
    background-color: #145d9c;
    display: flex;
}
.container .left, .container .right {
    flex: 0 0 200px;
    background-color: #3a90ce;
}
.container .main {
    flex: auto;
    background-color: #145d9c;
}

这个示例展示了Flexbox在圣杯布局中的实际应用。通过设置各个容器的flex属性，可以轻松实现多列布局的效果。flex:0 0 80px表示固定高度，flex: auto表示自动占据剩余空间，flex:0 0 200px则表示占据固定的宽度。

总的来说，Flexbox布局的学习和应用是一个不断探索的过程。通过理解其基本原理和各种属性的组合方式，我们可以更高效地完成各种布局需求。

转载地址：http://qxhfk.baihongyu.com/