骰子的布局 骰子的一面，最多可以放置9个点。

单个项目

双个项目

三个项目

四个项目

五个项目

六个项目

九个项目

总结:

1. justify-content 属性控制的是项目在主轴上的对齐方式→

2. align-items 属性控制的是项目在交叉轴上的对齐方式↑

3. align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。即多根轴线、多个项目排列的情况下

4. align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 默认值auto 继承父元素align-items属性

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
flex:1; === flex-grow:1; + flex-shirnk:1; + flex-basis:0%; flex-grow:属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。注意：等分的是剩余空间 flex-shirnk:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。
flex-basis:属性定义了在分配多余空间之前，项目占据的主轴空间（main-size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。属性用于设置或检索弹性盒伸缩基准值。 具体的详细解释可参考这篇文章：跳转链接

基本网格布局

具体的在线实例教程可参考这个==> 跳转链接

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

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。 导航放到最左边 order: -1; 前提是父部盒子设置了display:flex;属性 如果是小屏幕，躯干的三栏自动变为垂直叠加。 flex-direction: column;

输入框的布局 父盒子设置为 display:flex; input-field 设置为 flex:1; 链接地址

悬挂式布局 有时，主栏的左侧或右侧，需要添加一个图片栏。 链接地址

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