共计 2435 个字符，预计需要花费 7 分钟才能阅读完成。
介绍
在 JavaScript 中，我们可以利用变量，DOM 来保存状态，而 CSS 当中，我们也可以利用伪类选择器来保存状态，这就是 CSS 搞事的核心了。
核心概念：保存状态。
在上一篇 CSS 搞事技巧：checkbox+label+selector 中利用 checkbox+label+selector 来加深了解了 Flex 的弹性容器属性，这一节是要利用 :hover+:active 来了解 Flex 的弹性项目属性。
这两个属性你有没有很熟悉呢，其实我们经常在 a 标签上使用它们
LVHA 顺序: :link — :visited — :hover — :active
效果图：
示例源码、在线示例
示例
由于作者找不到工作，陷入自闭缺乏创作激情，所以这一个环节就略过……
技巧说明
hover 触发时，隐藏的子元素显示；active 触发时，子元素按照需求变化。
代码解读
1. 基础布局
因为展示性的东西需要垂直居中展示，所以我利用 Vue 的 props 固化了垂直居中的样式：
<Layout-Layout
align-center
justify-center
:background-color=”bgColor”
>
hello flex item
</Layout-Layout>
为了更容易演示，有请高矮胖瘦均不一致的三兄弟：
<div class=”flex__item”> 大哥 </div>
<div class=”flex__item”> 二弟 </div>
<div class=”flex__item”> 三妹 </div>
为它们增加样式，并添加伪元素：
<style lang=”stylus” scoped>
.flex__item
width 15%
height 15%
box-shadow 0 0 4px rgba(0, 0, 0, .5), inset 2px 0 1px rgba(0, 0, 0, .2)
display flex
align-items center
justify-content center
color #142334 // 钢青
&:nth-child(1)
width 20%
height 20%
&:nth-child(2)
width 16%
height 18%
&:nth-child(3)
width 14%
height 28%
&::before
position absolute
content ‘ 一人得道 ’
padding 10px 6px
border-radius 6px
color #e0c8d1 // 淡青紫
background-color #1661ab // 靛青
&::after
position absolute
content ‘ 背水一战 ’
padding 10px 6px
border-radius 6px
color #e0c8d1 // 淡青紫
background-color #1661ab // 靛青
</style>
查看一下效果：
2. :hover
基础布局完成，接着是添加 :hover 效果。当鼠标悬停时，两个伪元素将会显示，并且一个往上一个往下：
.flex__item
&::before
opacity 0
&::after
opacity 0
.flex__item:hover::before
transform translateY(-80px)
opacity 1
.flex__item:hover::after
transform translateY(80px)
opacity 1
查看效果：
3. :active
在我的记忆中，:active 是对任何元素都生效的，结果伪元素上设置失败了，然后就去看了下 MDN：
或许伪元素与元素本身算作一体？还是说要选择到父元素（线索：:focus-within）？这个留之后解决吧，FLag +1。取舍的办法还是有的（伪装），牺牲带头大哥吧：
.flex__item
&:nth-child(1)
width 20%
height 20%
&::after
position absolute
content ‘ 背水一战 ’
padding 10px 6px
border-radius 6px
color #e0c8d1 // 淡青紫
background-color #1661ab // 靛青
transition all 0.5s linear
opacity 0
&:nth-child(2)
width 16%
height 18%
&::before
position absolute
content ‘ 一人得道 ’
padding 10px 6px
border-radius 6px
color #e0c8d1 // 淡青紫
background-color #1661ab // 靛青
transition all 0.5s linear
opacity 0
&:nth-child(3)
width 14%
height 28%
&::before
position absolute
content ‘ 一人得道 ’
padding 10px 6px
border-radius 6px
color #e0c8d1 // 淡青紫
background-color #1661ab // 靛青
transition all 0.5s linear
opacity 0
查看效果：
为伪类添加 :active 效果：
.flex__item:active::before,
.flex__item:active::after
color #f1908c // 榴子红
background-color #fff
box-shadow 0 2px 4px rgba(0, 0, 0, .5), 2px 0 4px rgba(0, 0, 0, .6)
查看效果：
4. align-self
给子元素添加 align-self 不同的值：
.flex__item
&:nth-child(1)
&:active
align-self flex-end
&:nth-child(2)
&:active
align-self flex-start
&:nth-child(3)
&:active
align-self flex-start
最后结果就如介绍中所示了。
最后
CSS 很多属性我们可能难以理解其效果，个人认为运用 CSS 来解释 CSS 不失为一种良好的方式。
参考资料
MDN
中国色
