expanding-cards
可以访问此链接查看效果：http://50projects.tc.cluski.top/50projects50days/expanding-cards/
flex布局
在传统布局当中，基于盒子模型、依赖dispaly、position、float等属性，布局起来非常的不方便。但是使用到flex布局之后会简单很多。
例如，如果要实现一下的居中效果：
传统布局将会使用到定位和transform：
<div class="wrap">
<div class="box"></div>
</div>
.wrap {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.box {
height: 100px;
width: 100px;
border: 1px solid blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
但是使用到flex布局就十分简单了：
.wrap {
width: 300px;
height: 300px;
border: 1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.box {
height: 100px;
width: 100px;
border: 1px solid blue;
}
相关链接：
background相关属性
-
background-size：背景图片大小。此样例中使用到了cover关键字；此关键字将会把背景图片方法，直至铺满整个背景。 -
background-position：为每一个背景图片设置初始位置。此样例中使用到了center，背景将会被设置在中间位置。 -
background-repeat：定义背景图像的重复方式。此样例中使用到了no-repeat，背景将不会重复
background相关属性的参考链接：background - CSS：层叠样式表 | MDN (mozilla.org)
transition过渡动画
为了使样式之间的过渡不是那么生硬，通常会给变化加上动画。此样例中当然也是用了动画。
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
-webkit-transition: all 700ms ease-in;
}
当图片变为非激活状态的时候，只有flex属性产生了变化，都5变为了了0.5所以，将会只对图片宽度的变化引入了动画。动画的时常为700ms，动画以低速开始。
对于文字的显示，使用了一下css：
.panel.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}
当激活时，文字的透明度由0变为了1，文字显示出来。transition中，规定了只对透明度有效，且动画为0.3s，动画以低俗开始，并且在变化开始0.4s之后才开始动画。
动画相关链接：
媒体查询 @media
在样例css的最下方有这么一段css代码块：
@media (max-width: 480px) {
.container {
width: 100vw;
}
.panel:nth-of-type(4),
.panel:nth-of-type(5) {
display: none;
}
}
代表在页面宽度小于480px的时候花括号内的css代码起作用，及宽度为100vw，panel中的第4、5个元素不可见。
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。Media Queries的使用方法如下。
@media 媒体类型 and （媒体特性）{你的样式}
相关链接：
评论区