我们想要一个类名list-today-title和类名list-today的div-count显示在同一行，并且在list-today的父容器中都是垂直居中和水平居中另外span.list-icon和span.list-name在div.list-中应该水平居中和垂直居中今天.标题。并排队。完整的css样式如下（这里用的是scss）div.list-today{margin-bottom:10px;高度：40px；显示：弹性；弹性方向：行；证明内容：flex-start；div.list-today-title{flex-grow:10;显示：弹性；高度：40px；对齐项目：居中；span.list-icon{宽度：24px；高度：24px；i{字体大小：0;}}span.list-name{margin-left:10px;}}div.list-today-count{flex-grow:1;显示：弹性；对齐项目：居中；}}2.2flex我们来分析一下上面的css。首先，我们需要将list-today-title和list-today-count水平和垂直居中。div.list-today{显示：flex;弹性方向：行；证明内容：flex-start；对齐项目：居中；div.list-today-title{flex-grow:10}div.list-today-count{flex-grow:1}}说明：(1)display:flex:使这个元素成为一个flex容器，里面的子元素可以应用各种弹性功能。(2)flex-direction：定义主轴的方向(3)justify-content：子元素在主轴方向的排列，这里的值为flex-start，表示排列从开始。(4)align-items：子元素在横轴方向的排列，其中值为center，表示子元素以横轴为中心。这可用于垂直居中。(5)flex-grow：表示当父容器有多余空间时，子元素将按比例拉伸。一图抵千言，看看这张图你就明白了。2.3总结Flex布局是一种比较新的布局方式，可以解决一些传统布局难以解决的问题，比如子元素的垂直居中。所以学习使用flex布局是非常有必要的。要了解有关弹性布局的更多信息，请单击此处。