布局问题：flex 布局是什么？（最经典的）

   链接：https://www.jianshu.com/p/4290522e1560

  一般情况和 rem 一起用比较适合。

  首先要在外层设置   display: flex。

   Flex 布局有六个特性有哪些？

          flex-direction （方向）主轴项目方向，上下左右。

                  row（默认值）：主轴为水平方向，起点在左端。

                  row-reverse：主轴为水平方向，起点在右端。

                  column：主轴为垂直方向，起点在上沿。

                  column-reverse：主轴为垂直方向，起点在下沿。

         flex-wrap （轴线）一行不够换两行。

                     nowrap（默认）：不换行。   

                     wrap：换行，第一行在上方。

                     wrap-reverse：换行，第一行在下方。

          flex-flow （方向、轴线的缩写）默认值是：row nowrap

          justify-content （主轴对齐方式）

                  它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

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

                  flex-end：右对齐

                  center： 居中

                  space-between：两端对齐，项目之间的间隔都相等。

                  space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

          align-items（交叉轴上如何对齐）

          align-content（多轴对齐方式）一条轴无效

                  .box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;}

布局问题：绝对定位 position ？

       inherit: 父元素中继承。

       static: 默认，正常元素流中。不存在 top、bottom、left、right、z-index 这些。

       absolute: 绝对定位，相对 static 外的第一个父级元素定位。

       relative: 相对定位，相对于正常位置定位。

       fiexed: 绝对定位，相对 浏览器窗口／frame 定位。

布局问题：css 的经典布局有哪些？

      Stickyfotter。就是header、content、footer 布局。

布局问题：如何水平、垂直居中？

     水平居中：float、position、flex、calc。

     垂直居中：position、flex、calc、transform

布局问题：外层div 高度固定，里面有两个div,上下排列，里面的第一个div高度不固定，里面的第二个div高度要撑江整个div？

    一句话解答：外层设置 flex，方向 为 column, 里层第一个高度固定，里层第二个设置 flex: 1。

布局问题：div 分成三等分？

     一句话解答：外层设置 flex ，里面用 calc（100%／3)。

布局问题：ul 下面有 5个 li ，每个 li 有 marging-right:20px, 最后一个 li 没有边距 。求均分？

   效果图如下 ：

  布局如下：

  方法：flex 布局

           一句话总结：外层设置 flex,里面的 li 设置 宽度 calc(100%/5),右边距，box-sizing，最后一个 li设置边距为 0。

           也可以用下面的代替：

  布局和方法更换：最笨的方法。