进一步了解flex布局—来实现这些常见布局吧

??flex布局具有便捷、灵活的特点，熟练的运用flex布局能解决大部分布局问题，这里对一些常用布局场景做一些总结。

web页面布局(topbar + main + footbar)

示例代码

??要实现的效果如下：

??html代码：

 

     
header...
     
内容
     
footer...
   

css代码：

header{
  height:100px;
  background:#ccc;
}
footer{
  height:100px;
  background:#ccc;
}
.container{
  display:flex;
  flex-direction:column;
  height:100vh;
}
main{
  flex-grow:1;
} 

应用的flex属性

??本例中主要应用了以下flex属性：

1. flex-direction:column 使整体布局从上到下排列
2. flex-grow:1, 应用于main，使得main自动填充剩余空间

本例中应用以较少的css代码实现了传统的上中下页面布局，其中的关键通过flex-grow的使用避免了当main内容过少时footer部分会被提升到页面上方的问题(传统方式上可能需要靠绝对定位来解决了~)

每行的项目数固定并自动换行的列表项