使用CSS3 Flexbox布局创建的表格控件

Flexy Calendar Grid

css3, grid

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3597
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.flex-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.flex-row > * {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 14.28571%;
    -ms-flex: 0 0 14.28571%;
    flex: 0 0 14.28571%;
    overflow: hidden;
}
.flex-row.grid::after {
    content: '';
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
}
.flex-row.grid::before {
    content: '';
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 57.14286%;
    -ms-flex: 0 0 57.14286%;
    flex: 0 0 57.14286%;
}
body {
    background: #8c9eff;
    color: #fff;
    padding: 2em;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 3.5vmin;
    font-weight: 200;
}
header {
    text-transform: uppercase;
    font-size: 1.5em;
    padding: .5em;
    background: #98a8ff;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    height: 100%;
}
.grid-header {
    background: #98a8ff;
}
.grid-header > * {
    text-align: center;
    text-transform: uppercase;
    font-size: .8em;
}
.grid::before,
.grid::after {
    background: #98a8ff;
}
header,
.grid-header {
    box-shadow: 0 0 0 1px, 0 0 0 1px inset;
}
.grid {
    box-shadow: 0 0 0 1px;
}
.grid > *,
.grid::before,
.grid::after {
    box-shadow: 0 0 0 1px inset;
}
.grid-header > *,
.grid > * {
    padding: .5em;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}
main {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}
.grid-header {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}
.grid {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.grid > *:hover {
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.7, 1.5);
    transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.7, 1.5);
    transition: transform 0.35s cubic-bezier(0, 0, 0.7, 1.5);
    transition: transform 0.35s cubic-bezier(0, 0, 0.7, 1.5), -webkit-transform 0.35s cubic-bezier(0, 0, 0.7, 1.5);
    background: #feec9b;
    color: #8c9eff;
    border-radius: .2em;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 0 0 1px #fff inset, 0 0.3em 1.3em -0.5em #000;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
body {
    margin: 0;
}

HTML

Flexy Calendar Grid

css3, grid

编辑器支持Emmet

快捷键

Flexy Calendar Grid

css3, grid

使用CSS3 Flexbox实现的图文瀑布流布局

使用CSS3弹性框（Flexbox）实现的标签栏控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：