.flex__itemwidth15%height15%box-shadow004pxrgba(0,0,0,.5),inset2px01pxrgba(0,0,0,.2)displayflexalign-itemscenterjustify-contentcentercolor#142334//钢蓝色&:nth-child(1)width20%height20%&:nth-child(2)width16%height18%&:nth-child(3)width14%height28%&::beforepositionabsolutecontent'一个人gettheway'padding10px6pxborder-radius6pxcolor#e0c8d1//lightpurplebackground-color#1661ab//indigo&::afterpositionabsolutecontent'laststand'padding10px6pxborder-radius6pxcolor#e0c8d1//lightcyanbackground-color#1661ab//indigo简介在JavaScript中，我们可以使用变量和DOM来保存状态，在CSS中，我们也可以使用伪类选择器来保存状态，这是CSS的核心。.核心概念：保存状态。在之前的CSS技巧：checkbox+label+selector中，通过checkbox+label+selector加深了对Flex的弹性容器属性的理解。本节是通过:hover+:active来了解Flex的弹性item属性。你熟悉这两个属性吗？其实我们经常在a标签中使用它们LVHAorder::link--:visited--:hover--:active陷入自闭症，缺乏创作激情，所以跳过这个链接...技能说明当hover被触发时，隐藏显示子元素；当active被触发时，子元素根据需求变化。代码解读1.基本布局因为显示需要垂直居中显示，所以我使用Vueprops固化垂直居中样式：helloflexitem为了演示更简单，请三位身高矮胖瘦不一致的师兄：大哥
