CSS经典布局之弹性布局
2017-06-22 12:31 tlnshuju 阅读(563) 评论(0) 编辑 收藏 举报当我们在浏览浏览器的时候,经常会放大/缩小浏览器的显示比例,或者在不同的设备上。所处的分辨率也不尽同样。
因此。我们须要学习一个新的知识:弹性盒模型。
弹性盒模型
实现项目对齐,方向,排序(即使项目大小位置动态生成),可以动态改动子元素的宽度和高度。具有良好的适配性。
如图就是弹性布局一个大概范围。
弹性容器属性
属性 | 说明 |
flex-direction | 设置主轴方向。确定弹性子元素排列方式 |
flex-wrap | 当弹性子元素超出弹性容器范围是是否换行 |
flex-flow | 复合属性。flex-direction和flex-wrap双重属性 |
justify-content | 主轴上的对齐方式 |
align-items | 側轴上的对齐方式 |
align-content | 側轴上有空白,側轴对齐方式 |
以下我们用弹性布局的方式实现响应式菜单,先来看代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flexbox响应式菜单</title> <link rel="stylesheet" type="text/css" href="mycss.css"/> </head> <body> <ul class="menu"> <li><a href="#">number1</a></li> <li><a href="#">number2</a></li> <li><a href="#">number3</a></li> <li><a href="#">number4</a></li> <li><a href="#">number5</a></li> <li><a href="#">number6</a></li> </ul> </body> </html>
.menu{ list-style-type: none; padding: 0; margin: 0; display: -webkit-flex; display: -ms-flexbox; /*display: flex; //激活flex方式 flex-flow: row wrap; //弹性容器的属性*/ } .menu li{ width: auto; height: 40px; text-align: center; line-height: 40px; flex: 1 1 100%; //扩展比例为1,收缩比例为1。初始宽度为100% } .menu li:nth-child(1){ background-color: pink; } .menu li:nth-child(2){ background-color: plum; } .menu li:nth-child(3){ background-color: hotpink; } .menu li:nth-child(4){ background-color: palevioletred; } .menu li:nth-child(5){ background-color: deeppink; } .menu li:nth-child(6){ background-color: purple; } .menu li a{ color: black; text-decoration: none; } @media (max-width: 480px) { .menu { flex: 1 1 100%; flex-flow: row wrap; } } @media (min-width: 768px){ .menu { flex-flow: row nowrap; } }
以上我们就实现了一个弹性布局的一个大概模型。
再说一个我之前看到过的一面试题,也是要求写一道弹性布局的题,可是我们也能够另辟蹊径:
实现例如以下图所看到的的布局要求:sidebar固定宽度200px。content和header宽度自适应,当window宽度小于600px时。变成三列布局
我们实现的思路也跟弹性布局是一样的,看代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> *{ margin: 0; padding: 0; } @media (min-width: 600px) { .header { width: auto; background-color: green; } .sidebar { float: left; width: 200px; margin-right: -200px; background-color: gold; } .content { float: left; width: 100%; margin-left: 200px; background-color: red; } } @media (max-width: 600px) { .header { width: auto; background-color: green; } .sidebar { width: auto; background-color: gold; } .content { width: auto; background-color: red; } } </style> </head> <body> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> </body> </html>