Flexbox 布局续

Posted 2020-10-16

2）居中对齐的 flex 项

3）铺开的 flex 项

• space-evenly : flex 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。（愚人码头注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly 也是这个逻辑，建议在 chrome 60 下查看 这个demo 。 ）
• space-between : 任何两个相邻 flex 项之间的间距是相同的，但不一定等于第一个/最后一个 flex 项与 flex 容器边缘之间的间距;起始边缘和第一个项目之间的间距和末端边缘和最后一个项目之间的间距是相等的。
• space-around : flex 容器中的每个 flex 项的每一侧间距都是相等的。请注意，这意味着两个相邻 flex 项之间的空间将是第一个/最后一个 flex 项与其最近边缘之间的空间的两倍。

4）flex 项在交叉轴上的对齐

通常，我们想沿着 flex 方向（主轴）排列 flex 项，还可以在垂直于它的方向（交叉轴）上对齐 flex 项。通过设置 justify-content:center和align-items:center，可以使 flex 项水平和垂直放置在 flex 容器的中心。