使用CSS3弹性布局构建的响应式控制面板

Dashboard and Widgets with Flexbox 控制面板包含一些常用应用的界面组件，如笔记、日历、天气、邮件等。

dashboard，响应式

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2165
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300,400,700);
*,
*:before,
*:after {
    box-sizing: border-box;
}
body {
    padding: 20px 40px 80px;
    background: url(/uploads/160301/tiny_grid.png);
    font-family: 'Merriweather Sans', sans-serif;
    color: ghostwhite;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.Dashboard {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.Widget {
    margin: 10px;
    box-shadow: 1px 1px 5px #333;
    text-align: center;
}
.Widget-header {
    padding: 10px 20px;
}
.Widget-headline {
    margin: 0;
}
.NotesWidget {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 200px;
    background: white;
    font-size: 1.2em;
    color: #717A8D;
}
.NotesWidget .Widget-header {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.NotesWidget .Widget-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 100%;
}
.NotesWidget .Widget-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100px;
    padding: 0 0 10px;
    background: ghostwhite;
}
.NotesWidget img {
    height: 40px;
}
/*
 * Events Widget
 */

.EventsWidget {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #239ED9;
}
.EventsWidget .Widget-header {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.EventsWidget .Widget-body {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 0 20px 10px;
    background: #2180AC;
}
.EventsWidget img {
    height: 30px;
}
.EventsWidget .Widget-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.EventsWidget-count {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #239ED9;
}
/*
 * Color Forecast Widget
 */

.ColorForecastWidget {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0;
    background: ghostwhite;
    color: #717A8D;
}
.ColorForecastWidget .Widget-header {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
}
.ColorForecastWidget .Widget-body {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    margin: 0;
    padding: 0;
}
.ColorForecastWidget li {
    padding: 1em 0;
    list-style: none;
}
/*
 * Commute Widget
 */

.CommuteWidget {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #E67053;
}
.CommuteWidget-graphic {
    width: 120px;
}
.CommuteWidget .Widget-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 20px 0;
}
.CommuteWidget .Widget-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px 20px;
    background: #e98369;
}
.CommuteWidget .Widget-subHeadline {
    margin: 1em 0 0;
    font-weight: normal;
}
.CommuteWidget .Widget-data {
    margin: .5em 0;
}
/*
 * Weather Widget
 */

.WeatherWidget {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 300px;
    background: #5CC8E5;
}
.WeatherWidget .Widget-header {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    overflow: hidden;
    padding: 10px;
}
.WeatherWidget .Widget-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.WeatherWidget-primaryIcon {
    position: absolute;
    top: -50px;
    left: -50px;
    height: 120px;
    width: 120px;
    z-index: 0;
    opacity: .4;
}
.WeatherWidget .Widget-headline {
    font-size: 3em;
    z-index: 1;
}
.WeatherWidget .Widget-body {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #39bcdf;
    padding: 20px;
    font-weight: 300;
}
/*
 * Calendar Widget
 */

.CalendarWidget {
    background: #2699D0;
    overflow-x: auto;
}
.CalendarWidget .Widget-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.CalendarWidget img {
    height: 30px;
}
.CalendarWidget .Widget-headline {
    margin: 0;
    padding: 0;
    line-height: 1;
}
.CalendarWidget .Widget-body {
    background: #2180AC;
}
.CalendarWidget-dayHeaders td {
    color: #A1E0F5;
}
.CalendarWidget td {
    padding: 6px 8px;
}
/*
 * Message Widget
 */

.MessageWidget {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #ECEDF0;
    color: #717A8D;
}
.MessageWidget .Widget-header {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 10px 20px;
}
.MessageWidget-graphic {
    width: 60px;
}
.MessageWidget .Widget-subHeadline {
    font-weight: 300;
}
.MessageWidget .Widget-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 20px;
    background: #E67053;
}
.MessageWidget .Widget-body img {
    height: 30px;
}
.Color-1 {
    background: #D4F4E8;
}
.Color-2 {
    background: #FF95A2;
}
.Color-3 {
    background: #ED8161;
    color: white;
}
.Color-4 {
    background: #68A691;
    color: white;
}

HTML

<div class="Dashboard">
    <section class="Widget NotesWidget">
        <header class="Widget-header">
            <h2 class="Widget-headline">Notes</h2>

<section class="Widget EventsWidget">
        <header class="Widget-header">
            <h2 class="Widget-headline">Don't Forget</h2>
        </header>
        <div class="Widget-body">
            <p>Feed the dog or he will die :(</p>

<section class="Widget ColorForecastWidget">
        <header class="Widget-header">
            <h2 class="Widget-headline">Color Forecast</h2>
        </header>

<section class="Widget CommuteWidget">
        <header class="Widget-header">
            <img class="CommuteWidget-graphic" src="/uploads/160301/house-12.svg" alt="" />
        </header>
        <div class="Widget-body">
            <h2 class="Widget-headline">Commute Home</h2>
            <h3 class="Widget-subHeadline">Current Estimate</h3>
            <h4 class="Widget-data">1 hour</h4>
        </div>
    </section>

<h2 class="Widget-headline">58&deg;</h2>
        </header>
        <div class="Widget-body">
            <p>Wear a light jacket.
                <br />You might end up carrying it.</p>
        </div>
    </section>

<section class="Widget CalendarWidget">
        <header class="Widget-header">
            <img src="/uploads/160301/arrowl.svg" alt="" />
            <h2 class="Widget-Title">March</h2>
            <img src="/uploads/160301/arrowr.svg" alt="" />
        </header>
        <table class="Widget-body">
            <thead class="CalendarWidget-dayHeaders">
                <tr>
                    <td>Sun</td>
                    <td>Mon</td>
                    <td>Tue</td>
                    <td>Wed</td>
                    <td>Thu</td>
                    <td>Fri</td>
                    <td>Sat</td>
                </tr>
            </thead>
            <tbody class="CalendarWidget-days">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td>16</td>
                    <td>17</td>
                    <td>18</td>
                    <td>19</td>
                    <td>20</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                    <td>26</td>
                    <td>27</td>
                    <td>28</td>
                </tr>
                <tr>
                    <td>29</td>
                    <td>30</td>
                    <td>31</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </section>

<section class="Widget MessageWidget">
        <header class="Widget-header">
            <img src="/uploads/160301/mail.svg" alt="" class="MessageWidget-graphic" />
            <h2 class="Widget-headline">Do you have enough socks?</h2>
            <h3 class="Widget-subHeadline">Mom</h3>
        </header>
        <div class="Widget-body">
            <img src="/uploads/160301/pencil-06.svg" alt="" />
            <img src="/uploads/160301/dots-19.svg" alt="" />
            <img src="/uploads/160301/reply-05.svg" alt="" />
        </div>
    </section>
</div>

Dashboard and Widgets with Flexbox 控制面板包含一些常用应用的界面组件，如笔记、日历、天气、邮件等。

dashboard，响应式

编辑器支持Emmet

快捷键

Dashboard and Widgets with Flexbox 控制面板包含一些常用应用的界面组件，如笔记、日历、天气、邮件等。

dashboard，响应式

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：