flex弹性盒模型

xiaomo

布局中，我们经常使用float+display + position 来对页面进行排版布局，但是，在float属性上面，非常的可惜，我们只有right和left，在想要做到水平、垂直居中的时候就变得非常尴尬。不仅布局繁琐，局限性，还不能再移动端很好的布局
所以就有了flex布局（弹性布局）。操作方便，布局极其简单，移动端使用比较广泛。
但pc端浏览器支持情况比较差，IE11或更低版本不支持flex或仅支持部分

flex盒模型基本概念

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局

flex布局元素划分

外面的叫做，flex容器

被flex包裹的子级叫flex项目

元素的排列依据两条轴：main axis主轴、cross axis交叉轴（侧轴）

start是主轴和交叉轴的起始位置

end是主轴和交叉轴的结束位置

根据容器以及项目，我们分为容器属性和项目属性

容器属性

<div class="flex-container">
        <div class="box A">A</div>
        <div class="box B">B</div>
        <div class="box C">C</div>
        <div class="box D">D</div>
        <div class="box E">E</div>
</div>

.flex-container{
    display: flex;
}

flex-direction 控制主轴的方向

flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向，水平向右。侧轴方向就是 y 轴方向，水平向下

row：主轴为水平方向，起点为左端（默认值）
row-reverse：主轴为水平方向，起点为右端，从右至左
column：主轴为垂直方向，起点为上端
column-reverse：主轴为垂直方向，起点为下端

.flex-container{
    display: flex;
    flex-direction: row-reverse;
}

.flex-container{
    display: flex;
    flex-direction: column;
}

flex-wrap 决定项目是否换行

默认情况依据主轴一排显示，不换行

nowrap：不换行（默认）
添加超出父级宽度的内容，内容是不会自动换行的
项目的width/height根据内容真实占据的空间，宽高会被压缩，在父级空间允许的情况下，遵从width/height设置

wrap：换行，第二行在第一行的下面
当前父级宽度不够的情况下，子级内容会换行，子级宽高根据width/height，默认贴着顶部对齐

wrap-reverse：换行，第二行在第一行的上面
第二行在第一行的上面（排列从下至上），默认贴着底部对齐

.flex-container{
    width: 500px;
    height: 330px;
    display: flex;
}
.box {
    width: 60px;
    height: 60px;
}

.flex-container{
    display: flex;
    flex-wrap:wrap;
}

flex-flow 复合属性

同时控制主轴方向（flex-direction）和是否换行（flex-wrap）

.flex-container{
      flex-flow: column wrap;
  }

不是必填项，可以只写flex-direction / 两个值之间以空格进行间隔 / 主轴不管是水平还是垂直都会换行

justify-content 设置主轴上的子元素排列方式

flex-start：子级都左对齐（默认值）

flex-end：子级都右对齐

center：子级居中对齐

space-around：子级平均分配空间分配在元素的左右两边

space-between：先贴左右两边，子级再平均分配剩余空间在元素和元素之间

.flex-container{
      flex-flow: row wrap;
      justify-content : flex-end;
  }

.flex-container{
      flex-flow: row wrap;
      justify-content : space-around;
  }

/* space-between */
.flex-container{
      flex-flow: row wrap;
      justify-content : space-between;
  }

align-items 设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候使用

flex-start：交叉轴上起点对齐

flex-end：交叉轴上终点对齐

center：交叉轴居中对齐

stretch：拉伸，根据交叉轴撑满（默认）设置时注意，子级item的宽高不能固定，可以auto，或者不写

baseline：基线对齐，根据交叉轴文字基线进行对齐

.flex-container{
      flex-flow: row wrap;
     align-items: flex-end;
  }

.flex-container{
      flex-flow: row wrap;
      align-items: center;
  }

.flex-container{
      flex-flow: row wrap;
      align-items: stretch;
  }
  .box {
    width: 60px;
    /* height: 60px; */
}

align-content 设置侧轴上的子元素的排列方式（多行）

如果只有一根主轴，则设置无效，一根主轴，根据flex-wrap:nowrap来决定
flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点位置

center：交叉轴的居中位置

space-between：子元素先分配在上下两边，再平均分配剩余空间

space-around：平均分配在元素左右/上下

stretch：占满，注意：这里会根据设定的align-items

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

.flex-container{
      flex-flow: row wrap;
     align-content: space-between;
  }

.flex-container{
      flex-flow: row wrap;
     align-content: space-around;
  }

align-content 和align-items区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸

align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

就是单行找align-items 多行找 align-content

来个垂直居中

<div class="flex-container">
    <div class="box">A</div>
</div>

.flex-container{
    width: 500px;
    height: 330px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #6dd9bf;
}

项目属性

<div class="flex-container">
    <div class="box A">A</div>
    <div class="box B">B</div>
    <div class="box C">C</div>
    <div class="box D">D</div>
    <div class="box E">E</div>
</div>

.flex-container{
    width: 500px;
    height: 330px;
    background-color: pink;
    display: flex;
    flex-wrap:wrap;
}
.box {
    width: 60px;
    height: 60px;
}

order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0，接受负值

.B{
    order: -1;
}

flex-grow：定义项目放大比例，默认为`0`

如果有剩余空间的话，把剩余内容进行等分，然后按照flex-grow的份数，进行分配

.A {
    background-color: #6dd9bf;
    flex-grow: 1;
}
.B {
    background-color: #50a18e;
    flex-grow: 1;
}
.C {
    background-color: #f2d680;
    flex-grow: 1;
}
.D {
    background-color: #f29160;
    flex-grow: 1;
}

上面的计算公式：

div的宽（500px） - 元素已经使用宽度（60px * 5） = 剩余空间（200px）

flex-grow 一共分为 4 份，把剩余空间分为4份

1份 = 50px

放大数据： 60px * flex-grow

最终的宽度 = width + 放大数据

flex-shrink：定义元素缩放比例

默认为1，如果空间不足，将缩小该项目

.item {
    flex-shrink: <number>; /* default 1 */
}

flex-basis：项目占有固定空间

在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto

flex

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

建议使用这个flex，因为浏览器会自动推算相关值

align-self：属性允许单个项目和其他项目有不一样的对齐方式

默认值为：auto，可覆盖align-items

所有属性值与align-item一致

.B {
    align-self: center;       
}
.D {
    align-self: flex-end;
}

display:box 和 display:flex的差别

display：flex；是css3新出的，盒模型语法，也是未来浏览器支持的趋势，大部分浏览器也开始实现

display：box；是2009年时候的盒模型写法，兼容很差，使用的时候要加上前缀