本文内容采用连载形式，每一次新的内容可能与之前的内容相关联，我通过标题中最后的数字用以区分文章的先后次序，以便于读者在阅读文章时了解整个项目的发展脉络。

两栏布局设计

上文中我们介绍了两栏设计采用了flexbox进行布局，flexbox布局在现代化的浏览器中的兼容性已经很不错了，对于之前使用的float和position进行布局两栏来说，flexbox的用法相对容易些，通过使用默认设置就可以达到对一级子元素的并排效果。下面的图1展示了使用flexbox布局后页面中各个子元素的位置情况。

图1中左右两个边位置都空出了一定量的边距，它是由于我们对.container类设置了宽度值，并使用margin样式使其处于水平居中状态。图2中的第27行代码指定了.container类元素的宽度值为父元素宽度值的80%，这就是为什么图1中左右两边显示出空白的效果。第26行代码通过指定margin的左右边距值为auto，那么整个.container也就水平居中地显示在父元素中了。外部的flexbox容器设置完成之后，我们再来看一下它的内部元素又是如何设置的。

左栏列表设计

左侧栏和右侧栏在flexbox中默认按照横向排列，第一个元素显示在起始位置，在HTML代码中，.left类元素位于.right类元素之前，因此，flexbox的默认设置与期望效果是一致的，无需再指定flexbox容器的flex-direction，但对于flexbox中子元素的默认行为与期望效果不一致的情况，比如左右栏的宽度和高度值还是需要通过各自元素的参数进行设置，在.left类中，我们将它的宽度值设置为30%，高度值设置为100%，如图3所示

设置宽度值30%是希望左侧栏的宽度在父flexbox容器中占据30%的空间，而高度值设置为100%则表示左侧栏需要撑起整个容器的高度。除此之外，在图3的第33行和第36行，设置了颜色值，第一个颜色值为白色，表示左侧栏中元素的前景色（字体颜色）为白色，第二个颜色值为紫色，表示左侧栏的背景色。这样保证左侧栏中显示的内容容易辨识，前景色与背景色搭配时二者要有一定的对比度。最后一项设置的内容为overflow-y属性，这个属性值是当左侧栏中的内容条目比较多时，需要提供相对应的溢出策略，本项目使用了auto属性值，它表示：当列表项中的条目比较少（不足以占满一屏幕高度时），左侧栏不显示垂直滚动条；但是如果列表项目中的条目多于一个屏幕高度，那么将会自动出现垂直滚动条，使用户能够操作列表中所有的条目。

列表条目设计

左侧栏中展示的列表条目项都表示一类信息，即作者的信息，不存在除此之外其它类型的信息，因此在展现列表条目时，只需要设计一种视图样式就可以了，下面的图4给出了一个条目元素的布局情况

图4中视图的最外层为一个flexbox容器，容器内看上去像是存放了三个元素：一个表示头像，另外两个表示作者的姓名和国籍信息。我们是否可以直接将三个span元素放置于同一个容器元素内呢？首先，看一下最后实现后的HTML代码是什么样子的，如图5所示

图5中显示外层div元素包含了两个一级元素：一个是span元素，用以显示图像内容；另一个是div元素，这个div元素所包含的元素才是作者的姓名和国籍信息，也就是说，这个作者条目布局使用了一个嵌套元素.person-content类元素，而不是直接将姓名和国籍元素直接包含在父元素中。含有.person-content类的元素也是一个flexbox布局容器，它使姓名和国籍元素采用垂直布局。我们看一下最外层的.item类是如何实现的。

图6中第70行代码指定display为flex值，即含有.item类的元素也是一个flexbox，flexbox布局要么进行横向布局，要不进行纵向布局。但无法实现一部分元素横向布局，而另一部分元素采用纵向布局。也就是说，我们无法使用一个flexbox元素实现图4中的布局的。那么，该如何做呢？可以使用嵌套flexbox布局元素实现。

第一次布局将头像和人员内容信息以横向进行布局，如下图7所示

这次布局实现头像和人员信息的横向展示，代码如图6所示，因为flexbox布局默认是横向布局，因此不需要额外的指定布局方向(flex-direction)属性。

第二次布局将人员内容信息再次进行布局，但这次使用的是纵向布局，此布局与flexbox的默认布局方向是不同的，因此需要指定flex-direction属性值，如图8所示

图8中第92行代码设置含有.person-content样式的元素为flexbox容器，并通过第93行设置flex-direction的值为column，即按照列进行纵向布局，其结果就是位于这个.person-content类元素中的子元素显示方式为纵向排列。

在图9的HTML代码中，姓名和国籍所在的元素位于.person-content类元素中，因此，通过两个flexbox容器实现了列表项的布局效果。

条目视图修饰

上文已经实现了左侧栏条目列表的布局功能，实际展现时，我们发现每一个条目之间边界不清楚。因此，通过添加分割线的方式来突出每一个作者的完整信息。在列表中通过线条分割各个条目，其实就是在每一个条目元素的底部添加一个边框线就可以，设置线条的属性为1像素宽的白色实线，图6中代码第72行实现了此功能。实现的效果是列表中的每一个条目项的底部都显示了一条白色直线，但是，整个列表中第一个条目的顶部线条是没有的，我们需要另外设置最顶部的条目顶部边框的样式也为1像素宽的白色实线，如图10第81行代码所示。

图10中第80行代码只对所属父元素的第一个.item类元素生效，其它分割线的显示还是由图6中72行代码控制。分割线功能实现完成之后，我们再来调整下头像与作者信息元素之间的间距，最终效果如下图所示

图11中所示高亮区域底部和顶部边距为4px，左右边距为16px，实现代码在图10中第85行，选择器定义在第84行代码，它表示选中.item类元素中的第一个span子元素，参考图5，选中的标签正是含有.avatar类的span元素。本例中并没有添加对应的图像数据，而是提供了不同的颜色值用以区分相邻的作者头像，.avatar类的定义如下图12所示。

图12设置.avatar类元素的宽和高都为40px，边框半径为20px，这样正好形成了一个圆形图像，图像默认使用了黑色。最后，设定下鼠标悬浮于条目元素之上时的效果。

当鼠标悬浮在条目元素上时，将这个条目的颜色值设置为另外一个颜色更深的值，以便于区分当前需要点击的条目。其代码实现如图14所示，第75行代码为选择器，表示.item类元素在hover状态下时改变对应的样式，其中第77行代码为鼠标hover时的背景颜色值，第76行代码表示光标也调整为指针样式（手形状）。

至此为止，左侧栏页面布局样式全部介绍完了，下一步我们继续介绍右侧栏如何布局各个组件，谢谢各位！我们下一篇文章见！

本文为《作者管理系统之Web应用》的第二篇文章，其它的内容可以查看之前或之后的文章，您的反馈是对我最大的鼓舞，谢谢大家。