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

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

弹性盒模型

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

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. jboss之启动加载过程详解

    今天看了看jboss的boot.log和server.log日志,结合自己的理解和其他的资料,现对jboss的启动和加载过程做出如下总结: boot.xml是服务器的启动过程的日志,不涉及后续的操作过 ...

  2. 获取WebBrowser全cookie 和 httpWebRequest 异步获取页面数据

    获取WebBrowser全cookie [DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = true) ...

  3. PHP fSQL Tutorial

    PHP fSQL Tutorial This tutorial is designed to give a brief overview of the PHP fSQL API since versi ...

  4. StyleAI厚积薄发： Android网络图片数据传输

    在StyleAI上厚积了这么长时间,憋了这么久,本来想憋个更大的,不过还是薄发一次的好. 三.直接使用别人的工程 文章:Android学习之客户端上传图片到服务器 下载地址:https://downl ...

  5. Shell基础笔记一

    由于工作需要,开始学习Shell编程,都是一些简单的基础知识,现整理收集分享出来,希望对大家有帮助 -------------------------------------------------- ...

  6. ARX亮显问题

    转载一段acedSSSetFirst的用法仅供参考:打个比方,我创建了一个命令,这个命令的功能是提示用户选择,然后只过滤文本对象作为选择集,随后在屏幕上使得这个选择集的所有成员都亮显,并且能够显示出各 ...

  7. 梦想CAD控件COM接口标注样式

    增加标注样式 用户可以增加标注样式到数据库,具体实现c#代码如下: private void CreateDim() { //返回控件的数据库对象 MxDrawDatabase database = ...

  8. linux mysql设置远程访问

    >mysql -u root -p 选择进入mysql数据库use `mysql`; 查看所有存在的账号和地址.SELECT `Host`,`User` FROM `user`; 现在决定让ro ...

  9. C: 当字符数组首指针转化成char *指针，sizeof(*ptr)不为array的size

    #include <stdio.h> #include <string.h> int main() { char a[10] = "\0"; char *p ...

  10. mysql如何将一个字段多个类型串成一个字符串？

    结论 先说结论,可以使用group_concat group by的组合实现多行变一行,将一个字段的多个类型串成一个字段 需求: 如题,一个字段如电影类别,一部电影可以是多个类别,如喜剧.动作片等,其 ...