如果对flex不是很熟悉的同学,可以看一下我的另一篇文章Flex 布局1、网格布局1.1、基本网格布局最简单的网格布局,就是平均分布。HTML代码如下。<div class=“Grid”> <div class=“Grid-cell”>1/2</div> <div class=“Grid-cell”>1/2</div> </div> <div class=“Grid”> <div class=“Grid-cell”>1/3</div> <div class=“Grid-cell”>1/3</div> <div class=“Grid-cell”>1/3</div> </div>CSS代码如下。.Grid { display: flex;}.Grid-cell { flex: 1; background: #eee; margin: 10px;}这里最关键的就是flex:1使得各个子元素可以等比伸缩1.2、百分比布局某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。HTML代码如下。<div class=“Grid”> <div class=“Grid-cell col2”>50%</div> <div class=“Grid-cell”>auto</div> <div class=“Grid-cell “>auto</div></div><div class=“Grid”> <div class=“Grid-cell”>auto</div> <div class=“Grid-cell col2”>50%</div> <div class=“Grid-cell clo3”>1/3</div></div>CSS代码如下。.col2 { flex: 0 0 50%;}.col3 { flex: 0 0 33.3%;}这里最关键的是通过flex的第三个属性,也就是flex-basis来定义元素占据的空间。2、圣杯布局圣杯布局(Holy Grail Layout:)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。HTML代码如下。<div class=“container”> <header class=“bg”>header</header> <div class=“body”> <main class=“content bg”>content</main> <nav class=“nav bg”>nav</nav> <aside class=“ads bg”>aside</aside> </div> <footer class=“bg”>footer</footer> </div>CSS代码如下。.container { display: flex; flex-direction: column; min-height: 100vh;}.body { display: flex; flex: 1;}header,footer { flex: 0 0 100px;}.content { flex: 1;}.ads,.nav { flex: 0 0 100px;}.nav { order: -1;}.bg { background: #eee; margin: 10px;}@media (max-width: 768px) { .body { flex-direction: column; flex: 1; } .nav, .ads, .content { flex: auto; }}这里面需要注意的点有container的flex-direction: column这样保证了header,body,footer是在垂直轴上排列header,footer的高度可以通过flex: 0 0 100px来控制nav可以通过order:-1来调整位置通过@media (max-width: 768px)来调整小屏幕的页面结构3、侧边固定宽度侧边固定宽度,右边自适应html代码如下。<div class=“container1”> <div class=“aside1 bg”>aside</div> <div class=“body1”> <div class=“header1 bg”>header</div> <div class=“content1 bg”>content</div> <div class=“footer1 bg”>footer</div> </div></div>CSS代码如下。.bg { background: #eee; margin: 10px;}.container1 { min-height: 100vh; display: flex;}.aside1 { /* flex: 0 0 200px; */ flex: 0 0 20%;}.body1 { display: flex; flex-direction: column; flex: 1;}.content1 { flex: 1;}.header1, .footer1 { flex: 0 0 10%;}这个和上面的基本差不多就不做解释了。4、流式布局每行的项目数固定,会自动分行。html代码如下<div class=“container2”> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div></div>css代码如下.container2 { width: 200px; height: 150px; display: flex; flex-flow: row wrap; align-content: flex-start;}.item { box-sizing: border-box; background: #eee; flex: 0 0 20%; height: 40px; margin: 5px;}这里主要使用到了flex-flow: row wrap使得子元素水平排列,并且换行总结这是我简单总结的一些布局。如有错误,欢迎指正。更多系列文章
...