Flex布局-实例

一、基本网格布局

最简单的网格布局，就是平均分布。

clipboard01.png

HTML代码如下：

    1
    2
    3

CSS代码如下：

/* 本文中布局默认都加上 border-box */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.box {
    display: flex;
}
.item {
    flex: 1;
}

二、左边固定，右边自适应布局

左边网格的宽度固定，右边网格自适应。

clipboard02.png

CSS代码如下：

.item {
    flex: 1;
}
.item:nth-child(1) {
    flex: 0 0 50%;
}

三、圣杯布局

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

clipboard03.png

HTML代码如下：

  
Header
  

    
Nav
    
Main
    
Aside
  
  
Footer

CSS代码如下：

.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
header, footer {
  flex: 0 0 50px;
}
section {
  display: flex;
  flex: 1;
}
main {
  flex: 1;
}
nav, aside {
  flex: 0 0 200px;
}

四、固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

clipboard04.png

HTML代码如下：

    
Header
    
Content
    
Footer


CSS代码如下：
.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
section {
  flex: 1;
}

五、流式布局

每行的项目数固定，会自动分行。

clipboard05.png

CSS代码如下：

.parent {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}