一些css的知识

模糊：filter: blur(2px);
变形：transform: rotate(-0.6deg);

设置内容不超出box：

• {
  box-sizing: content-box; // 超出border大小

box-sizing: border-box; //不超出border大小
}

大小写：
text-transform: uppercase;

flex布局：
母容器display: flex;
flex-direction: row/row-reverse/column/column-reverse;
flex-wrap: wrap; //wrap宽度不够自动换行，nowrap不会换行；
justify-content: center; //元素如何排列
align-items: center; // 居中

使图片填满box：
object-fit: cover;

使图片之间有空隙：
gap: 16px;
row-gap/column-gap:

问题：当有两栏，元素是奇数个时，最后一个会居中，这时候如果要让它到左边，母元素使用::after来创建多一个虚拟的子元素，设置内容为空“”，宽度和其它子元素相同，就可以把最后一个挤到左边去。
.gallery::after {
content: "";
width: 350px;
}
问题：三栏时又该怎么办呢？

两者同一行对齐：
.calories-info {
display: flex;
justify-content: space-between;
align-items: flex-end;
}