一起学习一起进步~

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。

【代码】跨行或跨列布局。

【代码】多列等高实现。

【代码】瀑布流布局（网格）

【代码】瀑布流布局（CSS flex实现）

【代码】瀑布流布局。

【代码】flex 实现的圣杯布局。

【代码】网络布局搭配clip-path实现无规则图形。

双飞翼布局与圣杯布局的不同位置，圣杯布局的左中右三列容器，中间多了一个子容器存在，通过控制中间的子容器的边距或者padding空出左右两列的宽度。双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列第三宽度。

2、在通过 justify-content 和 align-self 进行对齐之前，任何正的可用空间都会分配到该维度中的自动边距。注意：如果可用空间分配给自动边距，则对齐属性将在该尺寸中不起作用，因为边距将窃取弯曲后剩余的所有可用空间。margin auto 的生效不仅仅是方向，垂直方向同样水平自动去分配这个剩余空间。使用了FFC/GFC 使 margin: auto 在垂直方向上居中元素。1、在计算弹性基数和弹性长度时，自动边距被视为 0；3、溢出的盒子会忽略它们的自动边距并在末端方向溢出。