html flex 表单样式,使用CSS3 Flexbox布局创建的表格控件

CSS

语言：

CSSSCSS

确定

.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;

}