示例网址：
https://50projects50days.com/projects/drink-water/
http://50projects.tc.cluski.top/50projects50days/drink-water/
效果：
思路：
排版没有什么好说的。主要难点在于js。
因为点击下面的小水壶上面的剩余水量和百分比都要变化，所以最好的做法是维护一个全局变量，表示现在有哪些小水壶是高亮的。然后对于小水壶点击的操作中和大水壶中数字的变化都是用使用这个维护好的高亮数量即可。
flex开头的一些CSS属性
flex-direction
flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
/* 横向行方向 */
flex-direction: row;
/* 横向行方向，但是是反向的 */
flex-direction: row-reverse;
/* 竖向列防线 */
flex-direction: column;
/* 竖向列防线，但是是反向的 */
flex-direction: column-reverse;
flex-wrap
flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
/* 默认不换行 */
flex-wrap: nowrap;
/* 换行 */
flex-wrap: wrap;
/* 反向换行，即换行是向上换行，而不是向下 */
flex-wrap: wrap-reverse;
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
flex-basis
flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* 在 flex item 内容上的自动尺寸 */
flex-basis: content;
当一个元素同时被设置了
flex-basis(除值为auto外) 和width(或者在flex-direction: column情况下设置了height) ,flex-basis具有更高的优先级。
flex-shrink
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。值设置的越大，收缩的越厉害，默认值为1
flex-shrink: 2;
flex-shrink: 0.6;
flex-wrap
flex-grow CSS 设置 flex 项 主尺寸 的 flex 增长系数。**值设置的越大，增长的越厉害。默认值为0。**在本例子中为剩余水量的盒子设置了flex: 1，也就是说flex-wrap被设置为了1，所以在一开始的时候，可以独占整个大水壶。
/* <number> 值 */
flex-grow: 3;
flex-grow: 0.6;
flex
此属性是以下 CSS 属性的简写：
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 一个值，无单位数字：flex-grow */
flex: 2;
/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 两个值：flex-grow | flex-basis */
flex: 1 30px;
/* 两个值：flex-grow | flex-shrink */
flex: 2 2;
/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
一开始点击没有动画的问题
因为我们点击下面的小水壶都会修改上面大水壶的高度，但是一开始都没有给高度，所以一开始点击的没有动画。所以只需要在一开始的时候就给大水壶中的剩余水量和百分比的元素都加上初始高度，之后变化高度的时候就会有动画了。
评论区