CSS经典布局之弹性布局_html/css_WEB-ITnose-html教程-PHP中文网

CSS经典布局之弹性布局_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:38:14

原创

1571人浏览过

当我们在浏览浏览器的时候，常常会放大/缩小浏览器的显示比例，或者在不同的设备上，所处的分辨率也不尽相同。因此，我们需要学习一个新的知识：弹性盒模型。

弹性盒模型

实现项目对齐，方向，排序（即使项目大小位置动态生成），能够动态修改子元素的宽度和高度，具有良好的适配性。

如图就是弹性布局一个大概范围。

弹性容器属性

属性	说明
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>

登录后复制