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

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

弹性盒模型

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

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. Angular——依赖注入

    基本介绍 1.AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用,这导致了使用者和被使用者之间存在依赖关系. 2.所谓依赖注入是指在运行时自动查找依赖关 ...

  2. vim之vimrc配置文件

    """"""""""""""""&quo ...

  3. .net core Elasticsearch 查询更新

    记录一下: 数据结构如下: public class ESUserTransaction { public long AccountId { get; set; } public string Var ...

  4. 实现加载页Loading Page 的几种方法

    网页也可以像原生应用那样加入进度条或者其他的loading效果带来更好的等待体验,这里归纳几种我收集的实现loading page的方法,这几种方法在交互上都有利有弊,适用于不同应用.(PS:以下方法 ...

  5. 02JavaScript基础语法及数据类型

    JavaScript基础语法及数据类型 2.1数据类型 2.1.1字符串(String) 用单引号或双引号括起来的零个或多个单一的字符所组成. 2.1.2数值(Number) 包含整数或浮点数. 2. ...

  6. Luogu P1540 机器翻译

    思路 大水题,只需要静下心来模拟就行.我一开始做的时候,首先想到滚动数组但是写完之后发现并不符合题目要求.题目要求新加入的单词作为最新的,在时间上属于最后一个.但是如果用滚动数组的话,新加入的单词就成 ...

  7. HDU - 2041 - 超级楼梯（dp）

    题意: 有一楼梯共M级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法? 思路: 如何到第n阶台阶,只能从n-1和n-2台阶上去,那么只需要计算到n-1阶台阶和到n-2阶台 ...

  8. 手机端--tap PC端--click

    区别: tap为jq mobile 的方法 1.click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件.single ...

  9. PHP上传文件到七牛（Qiniu）

    上传文件到七牛最简单的方式就是使用七牛官方最新的SDK 安装PHP SDK composer require qiniu/php-sdk 上传文件到七牛 use Qiniu\Auth; use Qin ...

  10. Hdu 4864(Task 贪心)（Java实现）

    Hdu 4864(Task 贪心) 原题链接 题意:给定n台机器和m个任务,任务和机器都有工作时间值和工作等级值,一个机器只能执行一个任务,且执行任务的条件位机器的两个值都大于等于任务的值,每完成一个 ...