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

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

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

示例代码

  要实现的效果如下：

  html代码：

 

   <div class="container">
     <header>header...</header>
     <main>内容</main>
     <footer>footer...</footer>
   </div>

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部分会被提升到页面上方的问题(传统方式上可能需要靠绝对定位来解决了~)

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

  要实现的效果如下：

 html代码：

示例代码

  css代码：

 

ul{
  display:flex;
  flex-wrap:wrap;
}
li{
  list-style:none;
  flex:0 0 25%;
  background:#ddd;
  height:100px;
  border:1px solid red;
}

 

应用的flex属性

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

1. flex:0 0 25%,相当于flex-basis:25%，使得每一个列表项的宽度占外层容器(本例中的ul元素)的25%，因此每行最多能够排开四个列表项。

2. flex-wrap:wrap,使得每行填满时会自动换行

实现自动划分多余空间的列表项

  本例的效果和上例中的图2很相似，只是每行为3个固定宽度的列表项，并且各列表项之间留有相同宽度的空隙

原文链接