学习Flex布局，Flex常用的是水平垂直居中，也可以用于页面窗口大小的分配！
学习链接
Expanding Cards (50projects50days.com)
功能实现
使用flex布局，
- 实现平均分布，（展示的占50%，剩余的各占50%）
- 点击即可展开，（占屏幕50%）
- 实现放大效果！
核心参数
父元素
- display: flex
子元素
- flex: 0.5 - 所有的
- flex: 1.5 - 需要分配的！
这里重点就是怎么分配这个子元素的flex值！
比如说 Html 结构长这样
div.container - 这里设置display:flex
div.item * 4 - 这里设置flex: 0.5 - 每个都是0.5
上面代码中，子元素一共有4个，每个都占0.5， 这样就实现了页面的平均分成四份 - 因为每个都所占的都一样！！
如果要实现鼠标移入，占屏幕一半！需要设置为1.5
.item:hover{
flex: 1.5
}
这个1.5是怎么来的？
计算公式 - 所占份数 / 2 - 本身
- 4 / 2 - 0.5 = 1.5
- 这样就实现了移入占50%的效果
如果说是6份，要实现占一半，应该设置为多少
- 还是用0.5 设置每个item
- 移入的设置为 6 / 2 - 0.5 = 2.5
如果说是8份，要实现占一半，应该设置为多少
- 还是用0.5 设置每个item
- 移入的设置为 8 / 2 - 0.5 = 3.5
设计实践
实现效果
- 平均分成四份
- 有一点斜切效果
- 默认是灰色的 - filter滤镜
- 移入占一半，还原图片的颜色，还有一点图片放大效果！
核心参数
- display: flex; - 父元素设置 + 水平居中
- flex: 0.5 - 子元素设置
- flex: 1.5 - 移入设置
- filter: grayscale(80%) - 灰度滤镜
总结
主要是总结了一下flex这个属性的用法，简单实用，可以算百分比之外的选择！然后实践了一下，官方编辑器贴代码。。
遇到喜欢的效果都写个博客！
山再高，往上攀，总能登顶;路再长，走下去，定能到达。
