·百分比布局
<div class="Grid">
<div class="Grid-cell u-1of4">左...</div>
<div class="Grid-cell u-1of2">中...</div>
<div class="Grid-cell u-1of3">右...</div>
</div>
.Grid {
display: flex;
text-align: left;
.Grid-cell {
flex: 1;
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
background: orange;
}
.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
background: aquamarine;
}
.Grid-cell.u-1of4 {
flex: 0 0 25%;
background: beige;
}
}
·圣杯布局
<div class="HolyGrail">
<!--占满屏-->
<header>#头部</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">#中间内容</main>
<nav class="HolyGrail-nav">#左侧导航</nav>
<aside class="HolyGrail-ads">#右侧广告</aside>
</div>
<footer>#底部</footer>
</div>
//圣杯布局
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
header,
footer {
flex: 1;
background: #ddd;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background: orangered;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
background: beige;
}
.HolyGrail-ads {
background: antiquewhite;
flex: 0 0 12em;
}
}
//圣杯布局,如果是小屏幕,躯干的三栏自动变为垂直叠加。
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
·百分比布局
<div class="Grid">
<div class="Grid-cell u-1of4">左...</div>
<div class="Grid-cell u-1of2">中...</div>
<div class="Grid-cell u-1of3">右...</div>
</div>
//百分比布局
.Grid {
display: flex;
text-align: left;
.Grid-cell {
flex: 1;
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
background: orange;
}
.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
background: aquamarine;
}
.Grid-cell.u-1of4 {
flex: 0 0 25%;
background: beige;
}
}
·输入框布局
<div class="InputAddOn">
<span class="InputAddOn-item">图标</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">按钮</button>
</div>
//输入框布局
.InputAddOn {
display: flex;
.InputAddOn-field {
flex: 1;
}
}
·悬挂式布局
<div class="Media">
<img class="Media-figure" src="../assets/logo.png" alt="">
<p class="Media-body">使用sublime好长时间了,但从接触vue后,出现了一个问题一直困扰着我,找了好多办法仍然无解,我不得不放弃它。最近在家养病,闲来无事,终于解决了这个bug。 sublime安装插件的步骤在这就不赘述了,有太多大神已经写的很详细了,下面直接上问题图</p>
</div>
//悬挂式布局
.Media {
display: flex;
align-items: flex-start;
.Media-figure {
margin-right: 1em;
}
.Media-body {
flex: 1;
}
}