flex布局

flex布局 弹性盒布局

为什么我们需要 flex?

• 解决元素居中问题

• 自动弹性伸缩，合适适配不同大小的屏幕，和移动端

        开启 ：display：flex；

        有两个概念，一个是父级 又称作容器；另一个是子级，又名项目

        首先聊一下容器的属性

                设置主轴方向：flex-direction：

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

                设置主轴上元素的排列方式：justifu-content： 

             flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
             flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
             center     靠着主轴居中对齐//一般就是居中对齐
             space-between 两端对齐，靠着容器壁，剩余空间平分
             space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
             space-evenly  平均对齐，不靠着容器壁，剩余空间平分

                设置主轴元素一行满了是否换行：flex-wrap ：

             nowrap (默认值) 不换行压缩宽度
             wrap    换行
             wrap-reverses 反向换行
                设置子级在父级侧轴上的排列方式：align-items：（在子项为单项的时候使用）整体一行元素看成整体，设置在侧轴对齐方式

           flex-start：交叉轴的起点对齐。
           flex-end：交叉轴的终点对齐。
           center：交叉轴的中点对齐。
           baseline: 项目的第一行文字的基线对齐。
           stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。
                
                设置子级在侧轴元素上的排列方式：align-content：（只能用于出现换行的情况）

        flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
        flex-end   （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
        center     (每一行)靠着cross线居中对齐//一般就是居中对齐
        space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
        space-around  (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
        strentch      (每一行)伸缩，占满整个高度
        

项目属性：

        单独控制元素所占剩余空间，侧轴排列方式，顺序等。
        flex-grow：长大
        flex-shrinik: 缩小
        align-self: 覆盖container align-items 属性
        order 排序
        flex-basis: 有效宽度

                                                

flex：1什么意思？

     flex:1；又为flex:1 1 auto;经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

       flex: 1 实际上是三个属性的缩写：flex-grow: 1; flex-shrink: 1 flex-basis: auto;

        该属性将会占据容器中所有剩余空间，所以可以轻易做到footer元素 一直保持在底部的效果

flex-grow：定义项目的的放大比例；

        默认为0，即 即使存在剩余空间，也不会放大；
        所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
        flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。

flex-shrink：定义项目的缩小比例；

        默认为1，即 如果空间不足，该项目将缩小；
        所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
        flex-shrink为0：空间不足时，该项目不会缩小；
        flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值

        默认值为auto，即 项目原本大小；
        设置后项目将占据固定空间。

圣杯布局

        要求：

        header和footer各占领屏幕所有宽度、高度固定

        中间container是一个三栏布局

        三栏布局中两侧宽度固定不变、中间部分自动填充整个区域

        中间部分高度是三栏中最高区域的高度