关于flex布局的回顾前言:flex布局也叫弹性布局,已经是常用的一种布局方式了,尤其是在移动端的布局中.相比于百分比布

前言:flex布局也叫弹性布局,已经是常用的一种布局方式了,尤其是在移动端的布局中.相比于百分比布局更加的灵活,能够更加快速的开发网页.也解决了脱离标准流的问题.

flex布局的组成部分

弹性容器
弹性盒子
主轴
侧轴

flex布局的常见的对齐方式和属性值

主轴对齐方式 (给父元素添加: justify-content)
侧轴多行对齐方式 (父元素添加: align-content)
侧轴单行对齐方式 (父元素添加: align-items)
单个盒子对齐 (子元素添加: align-self)

下面是相关属性值:

主轴相关属性
flex-start       默认值,起点开始依次排列
flex-end         终点开始依次排列
center           沿主轴居中
space-around     弹性盒子沿主轴均匀排列,中间部分间距是两侧间距的两倍
space-between    弹性盒子沿主轴均匀排列,空白部分平均分配,两侧贴着盒子边沿
space-evenly     弹性盒子沿主轴均匀排列,空白间距相等

侧轴相关属性
flex-start   默认值,起点开始依次排列
flex-end     终点开始依次排列
center       沿侧轴居中排列
stretch      默认值,弹性盒子沿主轴线被拉伸至铺满容器

改变主轴方向和换行

主轴默认水平方向默认是垂直的,修改主轴方向的属性是:flex-direction.
默认情况下弹性盒子是强制在一行显示的. 默认值是: flex-wrap: nowrap.换行显示: flex-wrap:wrap. 换行的效果图如下

圣杯布局

圣杯布局应该算是flex中用的比较多的一种方式,两侧的盒子用space-between固定住,中间的盒子伸缩比为1自适应. 代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
    }

    .box div:nth-child(1),
    .box div:nth-child(3) {
      width: 20px;
      background-color: pink;
    }

    .box div:nth-child(2) {
      flex: 1;
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

</html>

接上效果图,瑞思拜