浅谈Flex布局的属性及使用

网页布局是CSS的一个重点

传统的布局解决方案，是基于盒装模型，主要依赖的属性有：

normal flow（文档流）
float + clear
position relative + absolute
display
负margin

这些属性在进行页面布局时，组合使用以实现所需要的页面，但对于一些特殊的布局，实现就有些麻烦了

1 Flex布局介绍

Flex 是 Flexible Box 的缩写，意思为“弹性布局”

1.1 Flex布局的特点

块级布局侧重垂直方向、行内布局侧重水平方向，而Flex布局是与方向无关的
Flex布局可以实现空间自动分配、自动对齐（弹性、灵活）
Flex布局适用于简单的线性布局，更复杂的布局使用Grid布局

1.2 开启Flex布局

开启Flex布局时，只需要在父级元素上写上display: flex;，具体如下所示：

.box{
  display: flex;
}
//行内元素也可以
.box{
  display: inline-flex;
}
//Webkit内核的浏览器，需加上前缀
.box{
  display: -webkit-flex;
}

1.3 Flex容器基本概念

采用Flex布局的元素，可以看做一个Flex容器，其属性表示如下图所示：

Flex容器默认有两根轴：主轴（main axis）和侧轴（cross axis）。在默认情况下主轴是水平分布的，侧轴是垂直分布的，但可以通过flex-direction来改变主侧轴的分布方向。所以并不能说，水平分布的是主轴，垂直分布的是侧轴。

2 父元素的属性

Flex布局的父元素共有6中属性可以设置，分别为：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

2.1 flex-direction

flex-direction属性决定主轴的方向（前面说过，不能说水平是主轴，垂直是侧轴，就是因为这个属性），它一共有4个值：

row: 默认值，主轴为水平方向从左到右；
row-reverse: 主轴为水平方向从右到左；
column: 主轴为垂直方向从上到下；
column-reverse: 主轴为垂直方向从下到上

示意图为：

代码实现效果如下：

2.2 flex-wrap

默认的情况下，Flex容器中的子元素都排在一行，如果子元素的总宽度大于父元素的宽度，子元素就会被压缩。flex-wrap属性可以设置子元素换行，它一共有3个值：

nowrap: 默认值，不换行
wrap: 换行，第一行在上方
wrap: 换行，第一行在下方

示意图为：

代码实现效果图为：

2.3 flex-flow

flex-flow属性是flex-direction和flex-wrap的组合，它是将这两个属性写到一起，先写flex-direction，后写flex-wrap，默认值为row nowrap

代码实现效果图为：

2.4 justify-content

justify-content属性定义子元素在主轴上的对齐方式，它主要有5种取值：

flex-start: 默认值，从起点开始
flex-end: 从终点对齐
cneter: 居中对齐
space-between: 两端对齐，子元素之间的间隔相等
space-around: 每个子元素的左右间隔相等

示意图为：

代码实现效果图为：

2.5 align-items

align-items属性定义子元素在侧轴上的对齐方式，主要由5种取值：

strech: 默认值，子元素的高度铺满父元素
flex-start: 子元素从侧轴起点对齐
flex-end: 子元素从侧轴终点对齐
center: 子元素根据侧轴居中对齐
baseline: 根据子元素第一行文字的基线对齐(当字体大小不一致时，突出效果)

注意： 应用此属性时，子元素的高度不能写死，应该由其内容撑起来

示意图为：

代码实现效果图为：

2.6 align-content

align-content属性定义子元素多根轴线在侧轴上的对齐方式，只在多行显示下有效。主要取以下5个值：

stretch: 默认值，轴线铺满侧轴
flex-start: 与侧轴起点对齐
flex-end: 与侧轴终点对齐
center: 与侧轴中点对齐
space-between: 与侧轴两端对齐，轴线之间的间隔相等
space-around: 每根轴线两侧的间隔相等

示意图为：

代码实现效果图为：

3 子元素属性

Flex布局的子元素共有6种属性可以设置，分别为：

flex-grow
flex-shrink
flex-basis
flex
order
align-self

3.1 flex-grow

flex-grow属性表示当父元素空间有剩余时，将剩余空间分配给各子元素的比例，默认为0，表示不分配；当为数值时，表示父元素剩余空间分配给各子元素的比例，不是扩张后子元素的尺寸比例

代码实现效果图为：

3.2 flex-shrink

flex-shrink属性与flex-grow属性的作用相反，表示当子元素宽度总和大于父元素宽度，且未换行显示时，各子元素压缩大小，默认为1，表示各子元素等比压缩；当数值不一时，表示各子元素因为压缩空间而减小的尺寸的比例，不是压缩后子元素尺寸的比例

代码实现效果图为：

3.3 flex-basis

flex-basis属性可以用来设置子元素的空间，默认值为auto，表示为原本大小。当父元素有剩余空间时，可通过此属性扩充子元素的空间；各子元素通过扩孔之后的空间总和超过了父元素的空间大小时，按flex-basis值比例来设置子元素的大小，没有flex-basis属性时，默认flex-basis值为子元素原本大小，使子元素大小总和不得超过父元素空间大小

代码实现效果图为：

3.4 flex

flex属性是flex-grow、flex-shrink和flex-basis的合集，默认值为0 1 auto，后两个属性可不写

3.5 order

order属性定义子元素在排列顺序，默认值为0，值越小越靠前

代码实现效果图为：

3.6 align-self

align-self属性允许子元素单独设置对齐方式，优先级比父元素的align-items高。默认值为auto，表示继承父元素的align-items，如果没有父元素，则等同于stretch。其可设置以下属性：

auto: 继承父元素的align-items
stretch
flex-start
flex-end
center
baseline

除了auto值，其他值与父元素的align-items属性效果一样

4 几个flex布局

4.1 上中下布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header{
      height: 100px;
      background: #ddd;
    }
    main{
      flex-grow: 1;
    }
    footer{
      height: 100px;
      background: #ddd;
    }
  </style>
</head>
<body>
<header>heafer</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>

代码效果图为：

4.2 九宫格

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{padding:0;}
    ul{
      list-style: none;
      border: 1px solid black;
      width: 170px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    li{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      margin: 5px 0;
    }
  </style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

代码效果图为：

4.3 一般PC布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header{
      height: 50px;
      background: #ddd;
    }
    main{
      flex-grow: 1;
      display: flex;
    }
    .aside1{
      width: 100px;
      background: #aaa;
    }
    .aside2{
      flex-grow: 1;
    }
    .aside3{
      width: 100px;
      background: #aaa;
    }
    footer{
      height: 50px;
      background: #ddd;
    }
  </style>
</head>
<body>
<header>header</header>
<main>
  <aside class="aside1">aside1</aside>
  <aside class="aside2">aside2</aside>
  <aside class="aside3">aside3</aside>
</main>
<footer>footer</footer>
</body>
</html>

代码效果图为：

4.4 自适应绝对居中

代码效果图为：

不管子元素和父元素尺寸怎么变化，子元素始终居中