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

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

弹性盒模型

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

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. Python安装笔记

    1.教程

  2. 《网络管理》IP地址管理与子网划分

    IP地址管理——ipmaster ipmaster是一款对IP地址进行管理的软件,使用该软件可以提高网络管理员的工作效率.在大型网络中,使用该软件可以有序且高效地实现大中小型企业网IP地址的分配和管理 ...

  3. R函数详解

    字符串连接函数paste 1.字符串连接:paste(..., sep = " ", collapse = NULL)sep表示分隔符,默认为空格.collapse表示如果不指定值 ...

  4. 关于iframe与$.load()哪个更好

    iframe与$.load()哪个更好       iframe可以直接加载页面,但是要付出降低搜索引擎搜索效率的代价,它引入静态文件的方式是完全独立的,简单意思就是,在页面一(父级页面)用ifram ...

  5. P2041 分裂游戏

    P2041 分裂游戏 手推$n=3$是无解的,推断$n>=3$是无解的 证明略,这是道结论题. #include<iostream> #include<cstdio> # ...

  6. buf.readIntBE()

    buf.readIntBE(offset, byteLength[, noAssert]) buf.readIntLE(offset, byteLength[, noAssert]) offset { ...

  7. 转来的——python webdriver自动化测试初步印象——转来的

    python webdriver自动化测试初步印象 以下示例演示启动firefox,浏览google.com,搜索Cheese,等待搜索结果,然后打印出搜索结果页的标题 from selenium i ...

  8. js之DOM直接操作

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

  9. mesh topology for airfoil, wing, blade, turbo

    ref Ch. 5, Anderson, CFD the basics with applications numerical grid generation foundations and appl ...

  10. 【Codeforces 522B】Photo to Remember

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 模拟题.用set模拟下就好 [代码] import java.io.*; import java.util.*; public class M ...