flex相信大家都不陌生,对其各个属性都知道,不同属性的搭配能实现我们常见的复杂布局,可以说简单粗暴了~
1、topbar + main + footbar
html代码
<div class="container"> <header>header...</header> <main>内容</main> <footer>footer...</footer> </div>
css代码
header{ height:100px; background:#0de294; } footer{ height:100px; background:#0de294; } .container{ display:flex; flex-direction:column; height:100vh;//屏幕高度的100 % } main{ flex-grow:1;//实现了main自动填充剩余空间 }
2、元素的水平垂直居中
html代码
<div class="container"> <div class="inner">center</div> </div>
css代码
.container{ height:300px; width:300px; border:1px solid #0de294; display:flex; justify-content:center; //水平居中 align-items:center; //垂直居中 } .inner{ color: #0de294; }
3、圣杯布局
html代码
<div class="container"> <main>main</main> <aside>aside</aside> <nav>nav</nav> </div>
css代码
.container{ display:flex; height:100vh; } aside{ width:50px; background:#0de294; } main{ flex-grow:1; } nav{ width:80px; background:#0de294; order:-1;//使得order处于最左侧(html中main写在了最前,以利于优先加载主内容区) }
4、平均分配空间的栅格布局
html 代码
<div class="row"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> </div>
css代码
.row{ display:flex; flex-wrap:wrap; border:1px solid #0de294; } .column{ list-style:none; flex:1;//相当于flex:1 1 0%,而之所以不管各个column元素内容的宽度为多大,都能均分到相等的空间,正是因为相当于在设置了flex-grow:1使得剩余空间按相等比例自动分配的同时又设置了flex-basis:0%,才使得整个空间都平均分配了。 height:100px; border:1px solid black; }