.flexwidth100%height100%displayflex*box-sizingborder-box&__featsflex-basis28%height100%displayflexjustify-contentspace-around.feat__list显示flexflex-directioncolumnjustify-contentflex-startalign-itemscenter.feat__list_labelsflex-grow1displayflexflex-directioncolumnjustify-contentspace-aroundalign-itemscenter.divider宽度1px高度100%边距02px背景色#000;简介其实这篇文章写到一半的时候，它的名字还叫《重温 Flex 布局》，结果写的时候脑子坏了。附上一张图表达一下我的心情：其实我不是一个喜欢惹事的人。真的，从我游戏的英雄池就可以看出来：沉默屠夫（DOTA2），盖伦（LOL），亚瑟（杀虫剂）。这三个元素是这个《CSS 搞事技巧》的第一部分，不只是要用到下一个《重温 Flex 布局》，而是因为这个技巧确实很基础。核心概念：所谓技能无非就是保存状态（划重点）。例子部分只放了gif图和源码地址。详见技术说明部分（技术通用）。1.switch样式模仿Vuetify的Switches。gif预览：动画源码，在线动画2.关灯效果上面实现了开关，那么简单的联想当然就是开关灯了。Gif预览：动画源码，在线动画小技巧在JavaScript中，我们可以使用变量和DOM来保存状态，在CSS中，我们也可以使用伪类选择器来保存状态，这是CSS的核心，也是上面例子实现的本质。回到正题，就是flex布局，我们简单回顾一下flex布局的相关概念。首先将flex弹性布局的元素声明为flex容器，其子元素称为flexitems。这个flex容器默认有两个轴，一个叫主轴（mainaxis），一个叫侧轴（crossaxis）。整个Flex容器有六个属性，这次只介绍两个：justify-content和align-items（提一下align-content是多行的概念）。列出这两个属性的常用值（更多值请参见MDN）：.flex{justify-content:flex-start|弹性端|中心|间隔|空间周围；对齐项目：flex-start|弹性端|center;}代码解读本项目是通过VuePress渲染的，所以会用到Vue的语法，不过这里只使用Vue的for循环来解决重复写DOM的问题；效果参考来源。1、标签功能栏和展示栏布置在两侧。首先完成DOM结构：flex__feats为左侧功能栏，flex__exh为显示栏。对齐
