版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jnshu_it/article/details/84672067
这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【FLEX布局是什么？】
1.背景介绍FLEX布局是什么？2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
官方说法：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
flex 就是一种布局方式
Flex的基本作用就是让布局变的更简单，比如“垂直居中”等，当然不止这个，要说清楚flex有什么作用首先要了解一些概念。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 </p>
2.知识剖析
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
任何一个容器都可以指定成flex布局
3.常见问题
flex-direction ：flex-direction 决定主轴的方向（即项目的排列方向）。它有4个可能的值 ： row（默认值）：主轴为水平方向，起点在容器的左端。row-reverse：主轴为水平方向，起点在容器的右端。 column：主轴为垂直方向，起点在容器的上沿。column-reverse：主轴为垂直方向，起点在容器的下沿。</p>
justify-content 定义了项目在主轴上的对齐方式。它可能的值有5个：
flex-start：项目向左对齐，并每个项目之间有相同的间距
flex-end：项目向右对齐，原理与flex-start一样，只不过对齐的方向相对
center：让项目水平居中
space-between：让项目左右对齐，中间水平居中
space-around：原理跟center很像，只不过这个左右对齐以后两边的间距比较小
4.解决方案。
align-items属性定义项目在交叉轴上如何对齐。
flex-start：项目与顶端对齐
flex-end：项目与底部对齐
center：项目垂直居中
baseline:项目的第一行文字的基线对齐
5.编码实战：
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
6.扩展思考：
圣杯布局
经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句；
固定的底栏
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
更多讨论：
7.参考文献：https://flexboxfroggy.com/
8.更多讨论：
Q1：提问人：flex是哪一年出现的？
A1：回答人（可以是分享人，也可以是其他学员）：2009年由W3C发布。
Q2：提问人：什么是flex的容器？
A2：回答人（可以是分享人，也可以是其他学员）：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
任何一个容器都可以指定成flex布局
Q3：提问人：如何用flex完成底部？
A3：回答人（可以是分享人，也可以是其他学员）：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地