当我们在浏览浏览器的时候，经常会放大/缩小浏览器的显示比例，或者在不同的设备上。所处的分辨率也不尽同样。

因此。我们须要学习一个新的知识：弹性盒模型。

弹性盒模型

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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

弹性容器属性

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


CSS经典布局之弹性布局的更多相关文章

  1. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

  2. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  3. 学习flex布局（弹性布局）

    Flex是Flexible Box的缩写,意为弹性布局.是W3C早期提出的一个新的布局方案.可以便捷的实现页面布局,目前较高版本的主流浏览器都能兼容,兼容情况如下: Flex在移动端开发上已是主流,比 ...

  4. 谈谈CSS3中display属性的Flex布局（弹性布局）

    最近为了微信小程序,回忆起之前有接触过的弹性布局(display:Flex) 网上摘录的原文地址:https://www.cnblogs.com/xuyuntao/articles/6391728.h ...

  5. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  6. Android 布局开发之百分比布局、弹性布局

    1.百分比布局 很简单,超级简单.引用之后就可以使用了. compile 'com.android.support:percent:23+' git地址: https://github.com/Jul ...

  7. 微信小程序页面布局之弹性布局-Flex介绍

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...

  8. flex布局（弹性布局）

    1. 传统布局与 flex 布局比较 传统布局 兼容性好 布局繁琐 局限性,不能在移动端很好的布局 flex 弹性布局 操作方便,布局极为简单,移动端应用很广泛 PC端浏览器支持较差 IE 11 或 ...

  9. 浅谈静态布局、流式布局，rem布局，弹性布局、响应式布局

    静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:移动设备:另外建立移动网站,单独 ...

随机推荐

  1. java操作zip文件

    思路: 1).读取zip中的文件并将除了重名文件之外的文件转存到中转zip文件中. 2).往中转文件中插入txt文件. 3).删除原zip文件. 4).将中转zip文件重命名为原zip文件. 前提,t ...

  2. parsley之验证属性设置

    parsley.js添加表单验证功能,直接在html元素中添加对应属性: Name API Description Required #2.0必填 required HTML5 data-parsle ...

  3. Codeforces_761_E_(dfs)

    E. Dasha and Puzzle time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. day21-1 类的继承

    目录 类的继承 什么是继承 为什么用继承 对象的继承 继承与抽象 继承的应用 对象属性查找顺序 类的继承 什么是继承 继承是一种创建新类的方式,新建的类可以继承一个或多个父类(python支持多继承) ...

  5. CAD使用GetXData读数据（网页版）

    主要用到函数说明: MxDrawEntity::GetXData 返回实体的扩展数据. js代码实现如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  6. CAD得到ImageMark数据（com接口VB语言）

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. JAVA程序员面试笔试宝典1

    1.为什么Java中有些接口没有任何方法? 这些没有任何方法声明的接口又被称为标识接口,标识接口对于实现它的类没有任何语义上的要求,它仅仅充当一个标识的作用,用来表明它的类属于一个特定的类型. 2.j ...

  8. Eigen库笔记整理（一）

    首先熟悉Eigen库的用途,自行百度. 引入头文件: // Eigen 部分 #include <Eigen/Core> // 稠密矩阵的代数运算(逆,特征值等) #include < ...

  9. CentOS下安装微软雅黑字体

    CentOS下安装微软雅黑字体   微软雅黑下载地址:http://download.csdn.net/detail/u012547633/9796219 1.先从你本机 C:\Windows\Fon ...

  10. XML中的特殊（保留）字符数据

    XML中的特殊(保留)字符数据 制作人:全心全意 在XML文档中,有些字符会被XML解析器当作标记进行处理.如果希望把这些字符作为普通字符处理,就需要使用实体引用或CDATA段. 使用实体引用 为了避 ...