这几天在做移动端的web开发，遇到了一些问题，之前没有折腾过这方面的东西，这次好好吸收下

css3的flexbox--弹性盒子模型，这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间。

优点：可以很轻松的创建自适应的浏览器窗口的流动布局或自适应字体大小的弹性布局。

 <body>

     <div id="box1">1</div>

     <div id="box2">2</div>

     <div id="box3">3</div>

 </body>

1、开启弹性盒子模型的方式：display: box;

【水平或垂直分布】

body {

  display: box;

  box-orient: horizontal;

}

【反向分布】

body {

  display: box;

  box-orient: vertical;

  box-direction: reverse;

}

【具体分布】

/*box-ordinal-group: 定义盒子分布的顺序（数字），分布从小到大*/

body {

  display: box;

  box-orient: vertical;

  box-direction : reverse;

}

#box1 {

  box-ordinal-group:;

}

#box2 {

  box-ordinal-group:;

}

#box3 {

  box-ordinal-group:;

}

【盒子尺寸】

/*

    默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。

如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。

如果盒子是弹性的，其大小将按下面的方式计算：

        1. 具体的大小声明（width、height、min-width、min-height、max-width、max-height）；

        2. 父盒子的大小和所有余下的可利用的内部空间

如果盒子没有任何大小声明，那么其大小将完全取决于父box的大小。即：盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。

如果一个或更多的盒子有一个具体的大小声明，那么其大小将计算其中，余下的弹性盒子将按照上面的原则分享剩下的可利用空间。

看看下面的例子，理解起来更容易。

所有盒子都是弹性的

下面的例子中，box1的大小为box2的两倍，box2与box3大小一样。看起来好像是用百分比定义盒子的大小，但是有一个区别：使用弹性盒模型，增加一个盒子，无须重新计算其大小。

*/

body {

  display: box;

  box-orient: horizontal;

}

#box1 {

  box-flex:;

}

#box2 {

  box-flex:;

}

#box3 {

  box-flex:;

}

【一些盒子有固定大小】

/*

    公式：子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和

    下面的例子中，box3并不是弹性的，宽度为160px；这样box1和box2将有240px的可利用空间。因此，box1的宽度为160px(240*2/3)，box2的宽度为80px(240*1/3)。

*/

body {

  display: box;

  box-orient: horizontal;

  width: 400px;

}

#box1 {

  box-flex:;

}

#box2 {

  box-flex:;

}

#box3 {

  width: 160px;

}

【空间太多如何处理】

/*

    可利用空间的分布取决于两个属性值：box-align 和 box-pack。

属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、 justify、 or center。

        1. start 所有盒子在父盒子的左侧，余下的空间在右侧；

        2. end所有盒子在父盒子的右侧，余下的空间在左侧；

        3. justify 余下的空间在盒子间平均分配；

        4. center 可利用的空间在父盒子的两侧平均分配。

属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。

        1. start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部；

        2. end 每个盒子沿父盒子的下边缘排列，余下的空间位于顶部；

        3. center 可用空间平均分配，上面一半，下面一半；

        4. baseline 所有盒子沿着它们的基线排列，余下的空间可前可后；

        5. stretch 每个盒子的高度调整到适合父盒子的高度

*/

body {

  display: box;

  box-orient: horizontal;

  width: 400px;

}

#box1 {

  box-flex:;

}

#box2 {

  box-flex:;

}

#box3 {

  width: 160px;

}

【空间不足怎么办】

与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。
弹性盒模型看起来很不错，Gecko 和 WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也即是说，firefox、safari、chrome可以使用这些特性。
作为前端开发者来说，该模型对我们解决网页设计中一些常见的问题非常方便，如：表单布局、垂直居中、视觉上分离html流，等等。不久的将来它将成为一个web标准，早早熟悉它不是什么坏事。

内容经过一些修改和整理：出于豆瓣分享平台

更多关于css弹性盒: 更多

flexbox弹性盒子模型的更多相关文章

  1. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  2. flexbox 弹性盒子

    flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...

  3. CSS box-flex属性，然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

  4. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  5. css3弹性盒子模型

    当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

  6. 弹性盒子模型属性之flex-grow

    在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!!今天就让我们先来看看flex-grow这个属性 flex-g ...

  7. css中的f弹性盒子模型的应用案例

    案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  8. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  9. 弹性盒子模型display:flex

    1.div上下左右居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. Mps与Mrp区别

    MPS是完成品的计划表,描述一个特定的完成品的生产时间和生产数量.MPS是一个决定完成品生  产排程及可答应量(ATP)的程序.依据MPS,MRP得以计算在该完成品需求之下,所有组件,零件以  至原材 ...

  2. java工厂类与反射机制

    java 简单工厂类 2012-04-22 15:44:07|  分类: java |  标签:java工厂类  简单工厂类  |举报|字号 订阅     简单工厂模式需要由以下角色组成: 接口    ...

  3. [Poco库]使用经验

    1. Link错误 在Windows平台下使用时link报错 "CreateProcess is not defined"的解决GetEnvironmentVariable / S ...

  4. JavaScript总结之鼠标划过弹出div单击出现对话框

    为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...

  5. Scala基础入门－3

    学习Scala——映射和元组 映射和和元组,也就是Maps和Tuples.Map这东西应该都挺明白的,就是键值对的集合.而元组,tuple,这东西并不是每个语言都有(Python中是有的,不过当时学的 ...

  6. ODI 系列学习--整体架构概念

    ODI 系列学习--整体架构概念 ODI整体架构没有Oracle Database复杂,因为它属于程序功能的使用,更多是程序开发和配置的工作,当然ODI的优化涉及到很多数据库优化的工作,从整体架构入手 ...

  7. TPen的7种Style和16种Mode

    //TPen 的主要属性有四: Color.Width.Style.Mode {Color: 颜色} {Width: 宽度; 默认是 1; 如果赋予 <= 0 的值, 会使用默认值} {Styl ...

  8. 合并多个Redis dump.rdb 到一个rdb的多个database

    公司的服务器上运行了多个redis,现在希望合并到一个redis,用上redis的多database特性. 在网上找了一圈发现没有比较好的工具可以进行这个处理. 看过一个redis-dump号称可以导 ...

  9. 普林斯顿大学算法课 Algorithm Part I Week 3 排序的应用 System Sorts

    排序算法有着广泛的应用 典型的应用: 排序名称 排序MP3音乐文件 显示Google的网页排名的搜索结果 按标题顺序列出RSS订阅 排序之后下列问题就变得非常简单了 找出中位数(median) 找出统 ...

  10. 小窍门：变更Windows Azure Websites自带的node.exe版本

    这几天在玩node.js.Azure Websites天然支持node.js(还支持.net, php和python).   它对nodejs支持的原理是: IIS充当Web服务器,接收所有的请求,而 ...