多个 class 选择器未应用 属性
multiple class selectors not applying property
所以我的最后一个 question 被否决了，所以我会尝试更具体地说明这个。
我正在尝试使用 css 创建类似结构的 响应式网格 。我想要的是：
应该标准化——我将使用标准化 css
支持 Flex Box
对大多数浏览器具有向后兼容性
我做了 4 个 imp classes :
row : using it as wrapper( width:100% ) for my columns.
col-x : x=(1-12) width 100% at small , and width 100*x/12 at medium and large.
col-m-x : x=(1-12) width 100*x/12 at medium , and is defined at medium only.
col-l-x : x=(1-12) width 100*x/12 at large , and is defined at large only.
我已经为 m[=61 定义了 col =] 和 l 这样我就可以在不同的分辨率下组合多个宽度框。例如这里是 html :
<div class="row header">
<div class="col-2 col-m-4 col-l-1 spoons"></div>
<div class="col-2 col-m-1 col-l-3 spoons"></div>
<div class="col-2 col-m-1 col-l-1 spoons"></div>
<div class="col-2 col-m-1 col-l-2 spoons"></div>
<div class="col-2 col-m-1 col-l-2 spoons"></div>
<div class="col-2 col-m-4 col-l-3 spoons"></div>
</div>
根据上面的 html 片段，第一个 div 内行将是 2 个小屏幕，4 个中屏幕和 1 个大屏幕尺寸。
问题：
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Rows and clearfix */
.row:after {
content: " ";
display: table;
clear: both;
}
.row {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
/* Columns */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
float: left;
width: 100%;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 2px;
}
/* Or I can do [class^='col-'] {
float: left;
} */
/* Columns */
.hide {
display: none;
}
.r-img {
max-width: 100%;
height: auto;
display: block;
}
@media screen and (min-width: 48em) {
/* mid devices*/
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-m-1,
.col-m-2,
.col-m-3,
.col-m-4,
.col-m-5,
.col-m-6,
.col-m-7,
.col-m-8,
.col-m-9,
.col-m-10,
.col-m-11,
.col-m-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1,
.col-m-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2,
.col-m-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3,
.col-m-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4,
.col-m-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5,
.col-m-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6,
.col-m-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7,
.col-m-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8,
.col-m-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9,
.col-m-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10,
.col-m-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11,
.col-m-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12,
.col-m-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-m {
display: none;
}
}
@media screen and (min-width: 64em) {
/* lg devices */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-l-1,
.col-l-2,
.col-l-3,
.col-l-4,
.col-l-5,
.col-l-6,
.col-l-7,
.col-l-8,
.col-l-9,
.col-l-10,
.col-l-11,
.col-l-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1,
.col-l-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2,
.col-l-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3,
.col-l-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4,
.col-l-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5,
.col-l-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6,
.col-l-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7,
.col-l-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8,
.col-l-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9,
.col-l-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10,
.col-l-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11,
.col-l-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12,
.col-l-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-l {
display: none;
}
}
.header {
border: 1px solid #f52b63;
background: #e6ae27;
}
.spoons {
border: 1px solid #2b90f5;
background: #3ad4b5;
height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" />
<div class="row header">
<div class="col-2 col-m-4 col-l-1 spoons"></div>
<div class="col-2 col-m-1 col-l-3 spoons"></div>
<div class="col-2 col-m-1 col-l-1 spoons"></div>
<div class="col-2 col-m-1 col-l-2 spoons"></div>
<div class="col-2 col-m-1 col-l-2 spoons"></div>
<div class="col-2 col-m-4 col-l-3 spoons"></div>
</div>
上面的代码片段包含完整的代码，应该 运行 没问题，但它并没有这样做。 问题是，所有 [= class 行内的 80=] 未根据在不同分辨率下指定的 classes 设置样式。事实上，他们是随机挑选的，比如第一个 div 仅使用 col-2 设置样式，第二个很好，第三个又是一个 class。我希望它们遵循正常行为，即在定义多个 classes 时覆盖 classes 属性。
这里是 firefox 的 Inspect Element 对话框的屏幕截图，说明了上述情况。
问题是您在特定媒体查询之后定义 col-x 类。
在你的例子中； "col-l-1" 首先声明，然后在同一个媒体查询块中定义了“.col-2”，然后覆盖列的 "large" 版本。
最好将所有基础 类 放在不基于宽度的媒体查询中，如下所示，然后添加中型和大型网格 类，这将覆盖默认值 类 当达到最小宽度时：
@media only screen {
.small-1 {
width: 8.33333%;
}
.small-2 {
width: 16.66667%;
}
// and so on
}
// then add you width-specific media queries
我改天解决了这个问题，问题的根本原因是我在媒体查询中声明 类 的方式。
col-x 类 首先声明如下：
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,...{...}
然后再次声明针对中型和大型屏幕的媒体查询。
.col-2.col-m-2{....}
这使得他们在某些情况下覆盖了以前的 css 规则，因为 col-x 被重新定义了。
正确的做法如下：
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Rows and clearfix */
.row:after {
content: " ";
display: table;
clear: both;
}
.row {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
/* Columns */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
float: left;
width: 100%;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 2px;
}
.col-nr-1,
.col-nr-2,
.col-nr-3,
.col-nr-4,
.col-nr-5,
.col-nr-6,
.col-nr-7,
.col-nr-8,
.col-nr-9,
.col-nr-10,
.col-nr-11,
.col-nr-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-nr-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-nr-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-nr-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-nr-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-nr-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-nr-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-nr-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-nr-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-nr-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-nr-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-nr-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-nr-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
/* Or I can do [class^='col-'] {
float: left;
} */
/* Columns */
.hide {
display: none;
}
.r-img {
max-width: 100%;
height: auto;
display: block;
}
@media screen and (min-width: 48em) {
/* mid devices*/
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-m-1,
.col-m-2,
.col-m-3,
.col-m-4,
.col-m-5,
.col-m-6,
.col-m-7,
.col-m-8,
.col-m-9,
.col-m-10,
.col-m-11,
.col-m-12
{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3{
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.col-m-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-m-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-m-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-m-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-m-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-m-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-m-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-m-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-m-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-m-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-m-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-m-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-m {
display: none;
}
}
@media screen and (min-width: 64em) {
/* lg devices */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-l-1,
.col-l-2,
.col-l-3,
.col-l-4,
.col-l-5,
.col-l-6,
.col-l-7,
.col-l-8,
.col-l-9,
.col-l-10,
.col-l-11,
.col-l-12
{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1{
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3{
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5{
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6{
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8{
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9{
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10{
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11{
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.col-l-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-l-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-l-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-l-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-l-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-l-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-l-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-l-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-l-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-l-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-l-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-l-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-l {
display: none;
}
}
所以我的最后一个 question 被否决了，所以我会尝试更具体地说明这个。
我正在尝试使用 css 创建类似结构的 响应式网格 。我想要的是：
应该标准化——我将使用标准化 css
支持 Flex Box
对大多数浏览器具有向后兼容性
我做了 4 个 imp classes :
row : using it as wrapper( width:100% ) for my columns.
col-x : x=(1-12) width 100% at small , and width 100*x/12 at medium and large.
col-m-x : x=(1-12) width 100*x/12 at medium , and is defined at medium only.
col-l-x : x=(1-12) width 100*x/12 at large , and is defined at large only.
我已经为 m[=61 定义了 col =] 和 l 这样我就可以在不同的分辨率下组合多个宽度框。例如这里是 html :
<div class="row header">
<div class="col-2 col-m-4 col-l-1 spoons"></div>
<div class="col-2 col-m-1 col-l-3 spoons"></div>
<div class="col-2 col-m-1 col-l-1 spoons"></div>
<div class="col-2 col-m-1 col-l-2 spoons"></div>
<div class="col-2 col-m-1 col-l-2 spoons"></div>
<div class="col-2 col-m-4 col-l-3 spoons"></div>
</div>
根据上面的 html 片段，第一个 div 内行将是 2 个小屏幕，4 个中屏幕和 1 个大屏幕尺寸。
问题：
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Rows and clearfix */
.row:after {
content: " ";
display: table;
clear: both;
}
.row {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
/* Columns */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
float: left;
width: 100%;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 2px;
}
/* Or I can do [class^='col-'] {
float: left;
} */
/* Columns */
.hide {
display: none;
}
.r-img {
max-width: 100%;
height: auto;
display: block;
}
@media screen and (min-width: 48em) {
/* mid devices*/
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-m-1,
.col-m-2,
.col-m-3,
.col-m-4,
.col-m-5,
.col-m-6,
.col-m-7,
.col-m-8,
.col-m-9,
.col-m-10,
.col-m-11,
.col-m-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1,
.col-m-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2,
.col-m-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3,
.col-m-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4,
.col-m-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5,
.col-m-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6,
.col-m-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7,
.col-m-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8,
.col-m-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9,
.col-m-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10,
.col-m-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11,
.col-m-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12,
.col-m-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-m {
display: none;
}
}
@media screen and (min-width: 64em) {
/* lg devices */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-l-1,
.col-l-2,
.col-l-3,
.col-l-4,
.col-l-5,
.col-l-6,
.col-l-7,
.col-l-8,
.col-l-9,
.col-l-10,
.col-l-11,
.col-l-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1,
.col-l-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2,
.col-l-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3,
.col-l-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4,
.col-l-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5,
.col-l-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6,
.col-l-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7,
.col-l-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8,
.col-l-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9,
.col-l-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10,
.col-l-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11,
.col-l-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12,
.col-l-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-l {
display: none;
}
}
.header {
border: 1px solid #f52b63;
background: #e6ae27;
}
.spoons {
border: 1px solid #2b90f5;
background: #3ad4b5;
height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" />
<div class="row header">
<div class="col-2 col-m-4 col-l-1 spoons"></div>
<div class="col-2 col-m-1 col-l-3 spoons"></div>
<div class="col-2 col-m-1 col-l-1 spoons"></div>
<div class="col-2 col-m-1 col-l-2 spoons"></div>
<div class="col-2 col-m-1 col-l-2 spoons"></div>
<div class="col-2 col-m-4 col-l-3 spoons"></div>
</div>
上面的代码片段包含完整的代码，应该 运行 没问题，但它并没有这样做。 问题是，所有 [= class 行内的 80=] 未根据在不同分辨率下指定的 classes 设置样式。事实上，他们是随机挑选的，比如第一个 div 仅使用 col-2 设置样式，第二个很好，第三个又是一个 class。我希望它们遵循正常行为，即在定义多个 classes 时覆盖 classes 属性。
这里是 firefox 的 Inspect Element 对话框的屏幕截图，说明了上述情况。
问题是您在特定媒体查询之后定义 col-x 类。
在你的例子中； "col-l-1" 首先声明，然后在同一个媒体查询块中定义了“.col-2”，然后覆盖列的 "large" 版本。
最好将所有基础 类 放在不基于宽度的媒体查询中，如下所示，然后添加中型和大型网格 类，这将覆盖默认值 类 当达到最小宽度时：
@media only screen {
.small-1 {
width: 8.33333%;
}
.small-2 {
width: 16.66667%;
}
// and so on
}
// then add you width-specific media queries
我改天解决了这个问题，问题的根本原因是我在媒体查询中声明 类 的方式。 col-x 类 首先声明如下：
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,...{...}
然后再次声明针对中型和大型屏幕的媒体查询。
.col-2.col-m-2{....}
这使得他们在某些情况下覆盖了以前的 css 规则，因为 col-x 被重新定义了。
正确的做法如下：
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Rows and clearfix */
.row:after {
content: " ";
display: table;
clear: both;
}
.row {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
/* Columns */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
float: left;
width: 100%;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 2px;
}
.col-nr-1,
.col-nr-2,
.col-nr-3,
.col-nr-4,
.col-nr-5,
.col-nr-6,
.col-nr-7,
.col-nr-8,
.col-nr-9,
.col-nr-10,
.col-nr-11,
.col-nr-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-nr-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-nr-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-nr-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-nr-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-nr-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-nr-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-nr-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-nr-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-nr-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-nr-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-nr-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-nr-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
/* Or I can do [class^='col-'] {
float: left;
} */
/* Columns */
.hide {
display: none;
}
.r-img {
max-width: 100%;
height: auto;
display: block;
}
@media screen and (min-width: 48em) {
/* mid devices*/
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-m-1,
.col-m-2,
.col-m-3,
.col-m-4,
.col-m-5,
.col-m-6,
.col-m-7,
.col-m-8,
.col-m-9,
.col-m-10,
.col-m-11,
.col-m-12
{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3{
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.col-m-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-m-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-m-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-m-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-m-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-m-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-m-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-m-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-m-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-m-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-m-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-m-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-m {
display: none;
}
}
@media screen and (min-width: 64em) {
/* lg devices */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-l-1,
.col-l-2,
.col-l-3,
.col-l-4,
.col-l-5,
.col-l-6,
.col-l-7,
.col-l-8,
.col-l-9,
.col-l-10,
.col-l-11,
.col-l-12
{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1{
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3{
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5{
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6{
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8{
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9{
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10{
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11{
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.col-l-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-l-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-l-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-l-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-l-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-l-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-l-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-l-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-l-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-l-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-l-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-l-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-l {
display: none;
}
}