Flex常见布局实例

如果对flex不是很熟悉的同学，可以看一下我的另一篇文章 Flex 布局

1、网格布局

1.1、基本网格布局

最简单的网格布局，就是平均分布。
HTML代码如下。

    
1/2
    
1/2
  
  

    
1/3
    
1/3
    
1/3
  

CSS代码如下。

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
  background: #eee;
  margin: 10px;
}

这里最关键的就是flex:1使得各个子元素可以等比伸缩

1.2、百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
HTML代码如下。

    
50%
    
auto
    
auto


    
auto
    
50%
    
1/3

CSS代码如下。

.col2 {
  flex: 0 0 50%;
}
.col3 {
  flex: 0 0 33.3%;
}

这里最关键的是通过flex的第三个属性，也就是flex-basis来定义元素占据的空间。

2、圣杯布局

圣杯布局（Holy Grail Layout：）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
HTML代码如下。

    
header
    

      
content
      
nav
      
aside
    
    
footer
  

CSS代码如下。

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body {
  display: flex;
  flex: 1;
}

header,
footer {
  flex: 0 0 100px;
}
.content {
  flex: 1;
}

.ads,
.nav {
  flex: 0 0 100px;
}

.nav {
  order: -1;
}

.bg {
  background: #eee;
  margin: 10px;
}

@media (max-width: 768px) {
  .body {
    flex-direction: column;
    flex: 1;
  }

  .nav,
  .ads,
  .content {
    flex: auto;
  }
}

这里面需要注意的点有

• container的flex-direction: column这样保证了header,body,footer是在垂直轴上排列
• header,footer的高度可以通过flex: 0 0 100px来控制
• nav可以通过order:-1来调整位置
• 通过@media (max-width: 768px)来调整小屏幕的页面结构

3、侧边固定宽度

侧边固定宽度，右边自适应
html代码如下。

    
aside
    

      
header
      
content
      
footer
    

CSS代码如下。

.bg {
  background: #eee;
  margin: 10px;
}
.container1 {
  min-height: 100vh;
  display: flex;
}
.aside1 {
  /* flex: 0 0 200px; */
  flex: 0 0 20%;
}
.body1 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.content1 {
  flex: 1;
}
.header1, .footer1 {
  flex: 0 0 10%;
}

这个和上面的基本差不多就不做解释了。

4、流式布局

每行的项目数固定，会自动分行。
html代码如下

css代码如下

.container2 {
  width: 200px;
  height: 150px;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.item {
  box-sizing: border-box;
  background: #eee;
  flex: 0 0 20%;
  height: 40px;
  margin: 5px;
}

这里主要使用到了flex-flow: row wrap使得子元素水平排列，并且换行

总结

这是我简单总结的一些布局。如有错误，欢迎指正。更多系列文章