代码改变世界

CSS经典布局之弹性布局

2017-06-22 12:31  tlnshuju  阅读(589)  评论(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>