@charset "UTF-8";
/*布局通用文件*/

/*-moz-  Firefox */
/*-webkit-  Safari 和 Chrome */
/*-o-  Opera */
/*-ms-  IE */

/*浮动*/
.fl{float: left!important;}
.fr{float: right!important;}
.clear{clear: both;zoom: 1;}
.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0;}

/*网格布局，参考地址：https://www.css88.com/archives/8510*/
/*【1，网格容器属性】*/
.grid-layout{
    display: grid;
    /*网格线大小grid-gap与gap性质相同，只是为了适应不同的浏览器*/
    grid-gap:1px;
    gap:1px;

   /*
   【单位fr】允许你用等分网格容器剩余可用空间来设置 单元格 的大小
   定义列数和列宽：可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）或 repeat()
    grid-template-columns:repeat(2,1fr);

    定义行数和行高：可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）或repeat()
    grid-template-rows:100px 100px 100px  ;

    网格区域（即任意个数单元格组成的区域，测试来看，貌似是以行为单位数组）
    前提：需要在网格项（grid-item）里使用属性 grid-area ，即为网格项提供一个名称
    grid-template-areas:"head head""main main""foot foot";

    【其他属性】
    1，grid-auto-columns / grid-auto-rows：60px;
      指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。
      当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时，就会创建隐式轨道。

    2，grid-auto-flow： row | column ；
       如果你有一些没有明确放置在网格上的网格项(grid items)，自动放置算法 会自动放置这些网格项。该属性控制自动布局算法如何工作。
    */
}


/*沿着 inline（行）轴线对齐网格项(grid items);此值适用于容器内的所有网格项。*/
/*左对齐*/
.grid-hi-align-left{justify-items: start;}

/*右对齐*/
.grid-hi-align-right{justify-items: end;}

/*水平居中对齐*/
.grid-hi-align-center{justify-items: center;}

/*填满单元格的宽度（默认值）*/
.grid-hi-align-full{justify-items: stretch;}

/*沿着 block（列）轴线对齐网格项(grid items)；此值适用于容器内的所有网格项。*/
/*（顶部对齐）*/
.grid-vi-align-top{align-items: start;}

/*（底部对齐）*/
.grid-vi-align-bottom{align-items: end;}

/*（垂直居中对齐）*/
.grid-vi-align-center{align-items: center;}

/*（填满单元格的高度（默认值））*/
.grid-vi-align-full{align-items: stretch;}

/*有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。
如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。
在这种情况下，您可以设置网格容器内的网格的对齐方式。*/
/*（左侧对齐）*/
.grid-hc-align-left{justify-content: start;}

/*（右侧对齐）*/
.grid-hc-align-right{justify-content: end;}

/*（水平居中对齐）*/
.grid-hc-align-center{justify-content: center;}

/*调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度*/
.grid-hc-align-full{justify-content: stretch;}

/*在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间*/
.grid-hc-align-around{justify-content: space-around;}

/*在每个网格项之间放置一个均匀的空间，左右两端没有空间*/
.grid-hc-align-between{justify-content: space-between;}

/*在每个网格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间*/
.grid-hc-align-evenly{justify-content: space-evenly;}

/*（顶部对齐）*/
.grid-vc-align-top{align-content: start;}

/*（底部对齐）*/
.grid-vc-align-bottom{align-content: end;}

/*（垂直居中对齐）*/
.grid-vc-align-center{align-content: center;}

/*调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度*/
.grid-vc-align-full{align-content: stretch;}

/*在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间*/
.grid-vc-align-around{align-content: space-around;}

/*在每个网格项之间放置一个均匀的空间，上下两端没有空间*/
.grid-vc-align-between{align-content: space-between;}

/*在每个网格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间*/
.grid-vc-align-evenly{align-content: space-evenly;}

/*【2】网格项属性(item)
.grid-item{
      grid-column: <start-line> / <end-line> | <start-line> / span <value>;
      grid-column-start + grid-column-end的简写形式
      每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度

      grid-row: <start-line> / <end-line> | <start-line> / span <value>;
      grid-row-start + grid-row-end 的简写形式。
      每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度

      grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
      为网格项提供一个名称，以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用。
      另外，这个属性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写。

      justify-self: start | end | center | stretch;
      沿着 inline（行）轴线对齐网格项（ 相反的属性是 align-self ，沿着 block（列）轴线对齐）。
      此值适用于单个网格项内的内容。

      justify-self: start | end | center | stretch（default）;
      沿着 inline（行）轴线对齐网格项（ 相反的属性是 align-self ，沿着 block（列）轴线对齐）。
      此值适用于单个网格项内的内容。

       align-self: start | end | center | stretch（default）;
      沿着 block（列）轴线对齐网格项(grid items)（ 相反的属性是 justify-self ，沿着 inline（行）轴线对齐）。
      此值适用于单个网格项内的内容。

      place-self: <align-self> <justify-self>;
     是设置 align-self 和 justify-self 的简写形式。
     如果省略第二个值，则将第一个值同时分配给这两个属性。
}
*/

/*flex布局参考地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool*/
/*flex布局（行布局）*/
.flex-layout {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -o-flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

/*列布局*/
.flex-layout-column {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    -ms-flex-direction: column;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

/*flex里子项的水平对齐方式:其中h为horizontal的简写*/

/*左对齐*/
.flex-h-align-left {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -o-justify-content: flex-start;
    -ms-justify-content: flex-start;
}

/*右对齐*/
.flex-h-align-right {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -o-justify-content: flex-end;
    -ms-justify-content: flex-end;
}

/*居中*/
.flex-h-align-center {
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
}

/*左右对齐*/
.flex-h-align-between {
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
}

/*子项之间的距离是两边距离的两倍*/
.flex-h-align-around {
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -o-justify-content: space-around;
    -ms-justify-content: space-around;
}

/*flex里子项的垂直对齐方式：其中v为vertical的简写*/

/*顶部对齐*/
.flex-v-align-top {
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -o-align-items: flex-start;
    -ms-align-items: flex-start;
}

/*底部对齐*/
.flex-v-align-bottom {
    align-items: flex-end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -o-align-items: flex-end;
    -ms-align-items: flex-end;
}

/*居中*/
.flex-v-align-center {
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -o-align-items: center;
    -ms-align-items: center;
}

/*项目的第一行文字的基线对齐*/
.flex-v-align-baseline {
    align-items: baseline;
    -webkit-align-items: baseline;
    -moz-align-items: baseline;
    -o-align-items: baseline;
    -ms-align-items: baseline;
}

/*项目占满整个容器的高度*/
.flex-v-align-full {
    align-items: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -o-align-items: stretch;
    -ms-align-items: stretch;
}

/*flex里多行子项的垂直对齐方式:其中m为more的简写;如果项目只有一行，该属性不起作用。*/

/*顶部对齐*/
.flex-m-align-top {
    align-content: flex-start;
    -webkit-align-content: flex-start;
    -moz-align-content: flex-start;
    -o-align-content: flex-start;
    -ms-align-content: flex-start;
}

/*底部对齐*/
.flex-m-align-bottom {
    align-content: flex-end;
    -webkit-align-content: flex-end;
    -moz-align-content: flex-end;
    -o-align-content: flex-end;
    -ms-align-content: flex-end;
}

/*居中*/
.flex-m-align-center {
    align-content: center;
    -webkit-align-content: center;
    -moz-align-content: center;
    -o-align-content: center;
    -ms-align-content: center;
}

/*上下对齐*/
.flex-m-align-between {
    align-content: space-between;
    -webkit-align-content: space-between;
    -moz-align-content: space-between;
    -o-align-content: space-between;
    -ms-align-content: space-between;
}

/*每行子项之间的距离是两边距离的两倍*/
.flex-m-align-around {
    align-content: space-around;
    -webkit-align-content: space-around;
    -moz-align-content: space-around;
    -o-align-content: space-around;
    -ms-align-content: space-around;
}

/*全部子项自动伸展，直至充满整个容器*/
.flex-m-align-full {
    align-content: stretch;
    -webkit-align-content: stretch;
    -moz-align-content: stretch;
    -o-align-content: stretch;
    -ms-align-content: stretch;
}


/*flex里子项基于其他子项的放大比例，默认为0,即不放大*/
.flex-item-grow-1 {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -o-flex-grow: 1;
    -ms-flex-grow: 1;
}

.flex-item-grow-2 {
    flex-grow: 2;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -o-flex-grow: 2;
    -ms-flex-grow: 2;
}

.flex-item-grow-3 {
    flex-grow: 3;
    -webkit-flex-grow: 3;
    -moz-flex-grow: 3;
    -o-flex-grow: 3;
    -ms-flex-grow: 3;
}

.flex-item-grow-4 {
    flex-grow: 4;
    -webkit-flex-grow: 4;
    -moz-flex-grow: 4;
    -o-flex-grow: 4;
    -ms-flex-grow: 4;
}

.flex-item-grow-5 {
    flex-grow: 5;
    -webkit-flex-grow: 5;
    -moz-flex-grow: 5;
    -o-flex-grow: 5;
    -ms-flex-grow: 5;
}

.flex-item-grow-6 {
    flex-grow: 6;
    -webkit-flex-grow: 6;
    -moz-flex-grow: 6;
    -o-flex-grow: 6;
    -ms-flex-grow: 6;
}

/*项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。*/
.flex-item-shrink-0 {
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -o-flex-shrink: 0;
    -ms-flex-shrink: 0;
}

/*允许flex里子项的垂直对齐方式*/
/*默认值；继承flex容器align-items属性*/
.flex-item-align-auto {
    align-self: auto;
    -webkit-align-self: auto;
    -moz-align-self: auto;
    -o-align-self: auto;
    -ms-align-self: auto;
}

/*顶部对齐*/
.flex-item-align-top {
    align-self: flex-start;
    -webkit-align-self: flex-start;
    -moz-align-self: flex-start;
    -o-align-self: flex-start;
    -ms-align-self: flex-start;
}

/*底部对齐*/
.flex-item-align-bottem {
    align-self: flex-end;
    -webkit-align-self: flex-end;
    -moz-align-self: flex-end;
    -o-align-self: flex-end;
    -ms-align-self: flex-end;
}

/*居中*/
.flex-item-align-center {
    align-self: center;
    -webkit-align-self: center;
    -moz-align-self: center;
    -o-align-self: center;
    -ms-align-self: center;
}

/*项目的第一行文字的基线对齐*/
.flex-item-align-baseline {
    align-self: baseline;
    -webkit-align-self: baseline;
    -moz-align-self: baseline;
    -o-align-self: baseline;
    -ms-align-self: baseline;
}

/*项目占满整个容器的高度*/
.flex-item-align-full {
    align-self: stretch;
    -webkit-align-self: stretch;
    -moz-align-self: stretch;
    -o-align-self: stretch;
    -ms-align-self: stretch;
}