HTML5 使用弹性布局实现的响应式经典三列布局（也叫做圣杯布局）

Flexbox Holy Grail Layouts 该页面模板具有如下特性： 1. 可以切换布局模式：左边栏、右边栏或隐藏（滑入）边栏。 2. 响应式设计，在小屏幕下显示为竖向菜单栏。 3. 菜单项悬停的渐变平移动画

CSS3,模板

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
/* Hide switcher on small screens */
/*--------------------------------------------------------------
Header styles minus menu
--------------------------------------------------------------*/
/* flexbox styles */
/* mq 40em */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    /* Above WP toolbar */
    
    width: auto;
    /*--------------------------------------------------------------
Layouts
--------------------------------------------------------------*/
    
    z-index: 100000;
}
body {
    line-height: 1.4;
}
.centered {
    margin: 0 auto;
    padding: 0 1em;
}
@media screen and (min-width: 52em) {
    .centered {
        max-width: 52em;
    }
}
.masthead {
    background: #e6e6e6;
}
.site-title {
    margin: 0 0 1em;
    padding: 1em 0;
    font-size: 2em;
    font-weight: 300;
    text-align: center;
    color: black;
}
@media screen and (min-width: 44.44em) {
    .site-title {
        font-size: 2em;
    }
}
@media screen and (min-width: 50em) {
    .site-title {
        font-size: 2.5em;
    }
}
.site-title a {
    color: #f8eded;
    text-decoration: none;
}
.site-title a:hover {
    /* Base styles */
    
    text-decoration: underline;
}
.site-title {
    margin-bottom: 0;
}
.main-menu {
    padding: 0.4em 1em;
    color: white;
    background: #333;
}
.post-content {
    padding: 0 1.4em 1.4em;
}
.sidebar {
    padding: 0.5em 1.4em 1em;
    background: #e6e6e6;
    overflow: hidden;
}
.example-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.example-menu a {
    display: block;
    padding: 0.4em 0;
    color: inherit;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.example-menu a:hover,
.example-menu a:focus {
    padding: 0.4em 1em;
    background: #333;
    color: white;
}
.footer-area {
    padding: 0.4em 1em;
    text-align: center;
    /* Sidebar switcher buttons */
    
    background: #bfbfbf;
}
@media screen and (max-width: 40em) {
    .sidebar-switcher {
        display: none;
    }
}
@media screen and (min-width: 40em) {
    .sidebar-switcher {
        position: absolute;
        right: 0;
        padding: 0.4em 1em;
        color: #666;
    }
    .sidebar-switcher a {
        color: #666;
        padding-left: 0.4em;
    }
    .sidebar-switcher a:hover,
    .sidebar-switcher a:focus {
        color: #333;
    }
}
@media screen and (min-width: 40em) {
    .outer-wrap {
        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;
    }
    .content {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    .post-content {
        max-width: 40em;
        margin: 0 auto;
    }
    .main-area {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
    }
    .sidebar {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 12em;
        -ms-flex: 0 0 12em;
        flex: 0 0 12em;
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
    }
    .sidebar-left {
        -webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0;
    }
    .no-sidebar {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .hide {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 0;
        -ms-flex: 0 0 0;
        flex: 0 0 0;
        padding: 0;
        color: rgba(0, 0, 0, 0);
        -webkit-transition: color 0.2s ease, -webkit-box-flex 0.5s ease 0.3s, padding 0.5s ease 0.3s;
        -webkit-transition: color 0.2s ease, -webkit-flex 0.5s ease 0.3s, padding 0.5s ease 0.3s;
        transition: color 0.2s ease, -webkit-box-flex 0.5s ease 0.3s, padding 0.5s ease 0.3s;
        transition: color 0.2s ease, -ms-flex 0.5s ease 0.3s, padding 0.5s ease 0.3s;
        transition: color 0.2s ease, flex 0.5s ease 0.3s, padding 0.5s ease 0.3s;
    }
    .hide a {
        color: rgba(0, 0, 0, 0);
    }
}

HTML

<div class="centered">
            <div class="site-branding">
                <h1 class="site-title">Flexbox - Holy Grail Layouts</h1>
            </div>
            
        </div>
        
        <nav class="main-menu">
            The menu would go here
        </nav>
    </header>

<div class="content">
        <main class="main-area">
            <article class="post-content">
                <h2>One of my favourite movies</h2>
                <p>My very first encounter with Monty Python was the movie <em>Monty Python and the Holy Grail</em>. It was playing on TV one night while my brothers and I were home alone. We laughed for two hours straight.</p>
                <p>If you haven't watched the movie yet, <strong>SPOILER ALERT!</strong> We were hooked in from the first frame because of the spectacularly bizarre opening references to Norway. It all comes courtesy of a title designer who rather than printing
                    the proper titles decides to tell a story. Being in Norway it was incredibly amusing to see references to our home country in an English speaking movie.</p>
                <p>What can I say? My brothers and I are easily amused.</p>
                <p>For months (if not years) after watching the movie you'd find my brothers and I quoting the movie on a near constant basis.</p>
                <p>My favourite:</p>
                <p>"Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony."</p>
                <p>What can I say? I'm not a monarchist.</p>
            </article>
        </main>

<div class="sidebar">
            <div class="squish-container">
                <h3>Explore the Demos:</h3>
                <nav class="example-menu">
                    <ul>
                        <li><a href="#">Flexbox Menus</a>
                        </li>
                        <li><a href="#">Card Layout</a>
                        </li>
                        <li><a href="#">Holy Grail</a>
                        </li>
                        <li><a href="#">All Together Now</a>
                        </li>
                    </ul>
                </nav>
                
            </div>
        </div>
        
    </div>

<footer class="footer-area">
        <p>The footer usually appears on the bottom of the page. That's why it's called the "footer" right?</p>
    </footer>

</div>

Flexbox Holy Grail Layouts 该页面模板具有如下特性： 1. 可以切换布局模式：左边栏、右边栏或隐藏（滑入）边栏。 2. 响应式设计，在小屏幕下显示为竖向菜单栏。 3. 菜单项悬停的渐变平移动画

CSS3,模板

编辑器支持Emmet

快捷键

Flexbox Holy Grail Layouts 该页面模板具有如下特性： 1. 可以切换布局模式：左边栏、右边栏或隐藏（滑入）边栏。 2. 响应式设计，在小屏幕下显示为竖向菜单栏。 3. 菜单项悬停的渐变平移动画

CSS3,模板

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

使用弹性网格布局实现响应式图文列表展示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：