Flex布局之学习（三）

此篇文章是上一篇文章Flex布局之学习&＃xff08;二&＃xff09;的进一步完善&＃xff0c;加入了每一块中的内容&＃xff0c;并实现内容水平垂直居中。

•  在Header和Footer中比较简单&＃xff0c;只需要设置

text-align: center;
line-height: 68px;

• 在content中则不能用此方法&＃xff0c;因为其高度是不固定的&＃xff0c;将line-height设置成100%显然是不可行的&＃xff0c;所以在本篇文章中&＃xff0c;我介绍一下用flex布局的实现方法。

HTML部分

CSS部分

body{margin: 0;padding: 0;font-size: 30px;}.container {width: 100%;min-height: 100%px;background-color: lightsalmon;}.header {height: 68px;width: 100%;text-align: center;line-height: 68px;position: absolute;background-color: lightsalmon;}.content {display: flex;display: -webkit-flex;/*纵向排列*//* flex-direction: column; */width: 100%; /* 水平居中 */justify-content: center;/*垂直居中*/align-items: center;background-color:lightgreen;position: absolute;top:68px;bottom:68px;overflow: auto; /*超出的部分&＃xff0c;滚动条显示*/} .content-left {background-color: aquamarine;width: 320px;/* 不放大 不缩小 固定宽度320px */flex: 0 0 320px;height: 100%;}.content-middle {background-color: yellow;height: 100%;flex: 1 1 auto;}.content-right {background-color: aquamarine;width: 320px;height: 100%;/* 不放大 不缩小 固定宽度320px */flex: 0 0 320px;}.content-left,.content-middle,.content-right {display: flex;justify-content: center;align-items: center;}.footer {width: 100%;height: 68px;position: absolute;bottom: 0;background-color: lightsalmon;text-align: center;line-height: 68px;}