Flex布局实战篇

网格布局：

1.基本网格布局：

最简单的网格布局，就是平均分布。在容器里面平均分配空间，只是需要设置项目的自动缩放

HTML代码如下

CSS代码如下

因为每个网格都已经设置好了固定的百分比空间，唯一要做的就是给这些网格添加自动伸缩的flex

2.百分比布局：

某些网格的宽度设置为固定的百分比，其余网格平均分配剩余的空间

HTML代码如下

CSS代码如下

我们要做的就是给每个流体特性盒子设置自动伸缩和占据的主轴空间即可

圣杯布局：

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏

HTML代码如下

CSS代码如下

先设置整体为flex布局，整体的高度为浏览器视口的高度，且主轴方向是垂直的，这样就保证了头部、内容和底部的是按照从上之下的方式排列而不是从左至右

然后将头部和底部设置自动伸缩且高度由内容决定

最后将内容部分也设置为flex布局，让中间的部分宽度自适应，再定死两个边栏在主轴上所占据的空间，还得让他们都保证是自动缩放的，这样就完成了一个flex的圣杯布局

输入框布局：

我们常常需要在输入框的前方添加提示，后方添加按钮

HTML代码如下

CSS代码如下

先整体设置flex布局，然后让中间的输入框部分自动伸缩即可

固定的底栏：经典的Sticky Footer布局

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部

HTML代码如下

CSS代码如下

设置容器最小高度为视口的高度，并将主轴垂直排列保证是从上至下的顺序（注意此时底栏仍然是抬高至页面中央的，我们必须让内容自动伸展占据主轴多余的空间来将页脚挤下去，从而实现页脚下沉的效果），所以最后设置内容部分的flex让其自动伸缩占据完主轴剩余的空间，继而完成了页脚贴底的页面布局