DAY1-扩展卡片

前言

这个项目来源于GitHub上的一个开源项目https://github.com/bradtraversy/50projects50days，总共有50个用来练手的前端项目，我学习然后复现效果，并记录学习笔记和心得。

效果展示

expanding-cards(点击查看)

本项目实现了：通过点击卡片，改变该卡片的宽度。当前激活的卡片宽度变大，其余卡片保持小的宽度。

技术要点

1. flex布局

   该项目用到了flex布局，把body定义为弹性盒子，然后让其中的元素水平和垂直居中。

   justify-content: center;
   align-items: center;
   

2. 视窗高度的利用

   vw： 视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
   vh： 视窗高度的百分比（ 1vh 代表视窗的高度为 1%）
   

3. flex属性的使用

   通过改变flex的值，来改变每个盒子的大小

4. 定位的使用

5. 过渡效果的使用