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

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

弹性盒模型

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

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. DWG转PDF

    DWG转PDF DWG转换PDF有两种方法,一种是利用PDF打印机,一种是利用专业软件: 利用PDF打印机最直接,但是不能批量打印,下面讲一下利用专业软件如何进行批量转换,在这里以梦想CAD软件(Mx ...

  2. ES6字符串模板

    这里做个简单的拓展,之前做vue组件时,经常用到拼接字符串,换行时用到\,既费时又麻烦.这里介绍个ES6字符串模板方法 旧版拼接(各种换行拼接) Vue.component('obj-prop',{ ...

  3. 1002 A+B for Polynomials （PAT (Advanced Level) Practice）

    This time, you are supposed to find A+B where A and B are two polynomials. Input Specification: Each ...

  4. linux time-统计给定命令所花费的总时间

    推荐:更多linux 性能监测与优化 关注:linux命令大全 time命令用于统计给定命令所花费的总时间. 语法 time(参数) 参数 指令:指定需要运行的额指令及其参数. 实例 当测试一个程序或 ...

  5. 教你如何使用Python写游戏辅助脚本

    主要实现方式是通过图片的对比,在游戏中就行点击.运行程序需要以下东西. PIL: 图片处理模块     (python3 换成了 pillow)  下载地址: https://www.lfd.uci. ...

  6. js之DOM间接操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Wind rotor states

    test test Table of Contents 1. Wind rotor states 1.1. Turbulent Wake State 1.2. Vortex Ring State 1. ...

  8. Multisim破解教程

    转载:http://www.121down.com/article/article_52879.html

  9. java Beanutils.copyProperties( )用法

    这是一篇开发自辩甩锅稿~~~~ 昨天测试小姐姐将我的一个bug单重开了,emmmm....内心OS:就调整下对象某个属性类型这么简单的操作,我怎么可能会出错呢,一定不是我的锅!!but再怎么抗拒,bu ...

  10. App后台开发运维和架构实践学习总结（4）——APP的注册和登录功能设计

    一.为什么需要注册和登录? 是否需要注册和登录的关键取决于产品形态. 如果用户注册登录对于用户需求.产品功能.商业模式本身带不来任何价值的话,就没必要设计这样的功能.比如一些实用工具类的产品:计算器. ...