flex布局

没有flex之前

1. 调样式可以把前端搞得头大

2. 多端样式统一问题

虽然，现在前端组件模块开发也开始流行了，组件拿来即用，不用过多考虑样式问题，例如element，不过这里还是要总结一下flex相关

flex是什么

flex也叫flex弹性布局，常用于设置弹性盒模型对象的子元素如何分配空间问题

把盒子变成弹性盒子display: flex

flex基础

flex分为容器和容器中的子元素两部分，子元素也叫项。

容器的属性

没加display:flex前，div都是往下叠加的，加了display:flex后，div变成往右叠加（即flex-direction：row）

/**flex-direction：项目水平轴上（主轴，x轴）的排列方向*/
flex-direction: row;  /**从左往右一直叠加*/
flex-direction: row-reverse; /**从右往左一直叠加*/
flex-direction: column; /**从上往下一直叠加*/
flex-direction: column-reverse;  /**从下往上一直叠加*/

容器内是否换行

/** flex-wrap：决定项目超出范围是否换行 */ 
  flex-warp: nowarp: /**不换行*/
  flex-warp: warp: /**换行，第一行在上方*/
  flex-warp: warp-reverse: /**换行，第一行在下方*/

对齐方式

/** justify-content：项目在水平轴上（主轴）的对齐方式。 */
   align-items：/**项目在垂直轴上（交叉轴）如何对齐*/
   align-content：/**项目在两根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/

/**  justify-content主轴和align-items交叉轴都适用，只是方向不一样。下图只举例主轴方向 */
flex-start：/**左对齐*/
flex-end：/**右对齐*/
center：/**居中*/
space-around：/**左右两边留出空间，目测是项目之间距离的一半*/
space-between：/**左右两边不留空间，项目之间平分空间*/
space-evenly：/**左右两边，项目之间的距离大小都一样*/

项目属性

order排序：值越小越靠前，默认0

flex-grow放大：默认0

flex-shrink缩小：和放大差不多，不过多介绍，默认1

flex-basis：分配主轴上多余空间，默认auto

align-self：会覆盖align-items属性

flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto（即不放大不缩小且自动分配空间）。后两个属性可省略，。

flex实战

圣杯布局

经典的上中下布局，然后又在中间部分再进行一次分割，分割为三部分。

很多大型的网站采用的是圣杯布局，例如京东

发现一个快捷方式，按比例切分div空间，比如要1：5：1切分空间，则在第一个div设置flex：1，第二个div设置flex：5，第三个div设置flex:1即可。

flex:5代表1. flex-grow: 5 flex-shrink: 1 flex-basis: 0% 这三个样式组合，flex:1代表 flex-grow: 1 flex-shrink: 1 flex-basis: 0%

<div class="content">
    <div class="head">头部</div>
    <div class="body">
        <div class="body-left">body左边</div>
        <div class="body-center">body中间</div>
        <div class="body-right">body右边</div>
    </div>
    <div class="foot">脚部</div>
</div>

.content {
    min-height: 100vh;
    border: 1px solid #333333;
    /*开启flex布局*/
    display: flex;
    flex-direction: column;
    text-align: center;
}

.head {
    border: 1px solid #333333;
    background-color: #4CD964;
    flex: 1;
}

.body {
    border: 1px solid #333333;
    background-color: #F0AD4E;
    flex: 5;
    /*body再进行一次flex布局*/
    display: flex;
}

.body-left {
    background-color: #f0ede1;
    flex: 1;
}

.body-center {
    background-color: #F0AD4E;
    /*
      flex-grow: 5;   放大5倍
      flex-shrink: 1;  不缩小
      flex-basis: 0%;  分配多余空间之前，项目占据的主轴空间
    */
    flex: 5;
}

.body-right {
    background-color: #f0ede1;
    flex: 1;
}

.foot {
    border: 1px solid #333333;
    background-color: #96a1e7;
    flex: 1;
}

头部和底部固定，中间自适应

flex:数值，代表项目平分flex容器的剩余的空间，如果只有一个项目使用了flex属性，则它占用剩余的所有空间。

右下角返回顶部按钮

实现思路

在foot栏中加一个弹性div，控制flex容器中的子项目的主轴和交叉轴的对齐方式都右对齐就可以了

侧边导航栏布局（类似element）

实现思路

先左右划分成两半，左边15%，剩余空间给右边，再把右边分成上中下

<div class="content">
    <div class="sidebar">侧边栏</div>
    <div class="body">
        <div class="body-head">上</div>
        <div class="body-center">中(主体)</div>
        <div class="body-foot">下</div>
    </div>
</div>

.content {
    min-height: 100vh;
    display: flex;
    background-color: #aeb9b8;
    flex-direction: row;
}

.sidebar {
    background-color: #dbb4e7;
    flex: 0 1 15%;
}

.body {
    background-color: #3F536E;
    flex: 4;
    display: flex;
    flex-direction: column;
}

.body-head {
    background-color: #E7BFB4;
    flex: 0 1 10%;
}

.body-center {
    background-color: #808080;
    flex: 1;
}

.body-foot {
    background-color: #E7BFB4;
    flex: 0 1 10%;
}