以下内容为大漠大大的书籍《图解css3核心技术与案例实战》观看后的总结。

css2.1中定义了四种布局模式，由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法
块布局
行内布局
表格布局
定位布局
css3引入的布局模式flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度、高度，以最佳方式填充可用空间。flex容器会使子项目扩展来填满可用空间，或缩小他们以防止溢出容器。
一、伸缩容器和伸缩项目
通过display属性显式的给一个元素设置为flex或者inline-flex，这个容器就是一个伸缩容器。伸缩容器会为其内容创立新的伸缩格式化上下文，其中设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。若元素display的指定值为inline-flex，且元素是一个浮动或绝对定位元素，则display的计算值为flex。
1）伸缩容器的属性
  • 伸缩流方向 ：指伸缩容器的主轴方向，决定伸缩项目放置在伸缩容器的方向。flex-direction默认值为row。09版本为box-orient，默认值为inline-axis。
  • 伸缩行换行：伸缩项目溢出伸缩容器时，设置伸缩容器的伸缩项目是单行显示还是多行显示。以及决定侧轴的方向。flex-wrap：nowrap。09版本为box-lines：single
  • 伸缩方向与换行：伸缩方向与伸缩换行的缩写。flex-flow:flex-direction flex-wrap。
  • 主轴对齐：设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，制定如何在伸缩项目之间分布伸缩容器额外空间。
  • 侧轴对齐：伸缩项目可以在伸缩容器当前行的侧轴上进行对齐。
  • 堆栈伸缩行：定义伸缩容器中伸缩项目行在侧轴的对齐方式，类似于侧轴对齐，只不过这是用来控制伸缩项目行在布局轴的堆放方式。
2）伸缩项目的属性
  • 显示顺序：默认显示顺序是按照源码中出现的先后顺序，可以通过伸缩项目的显示顺序修改伸缩项目在页面中显示的顺序，也可以通过这个属性对伸缩项目进行排序组合。
  • 侧轴对齐：包括两种，一种是align-items，设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式，另一种是align-self，单独在伸缩项目上复写默认的对齐方式。
  • 伸缩性：定义伸缩项目可改变他们的宽度或高度填补可用的空间。
二、flexbox模型规范及兼容性
1）版本
旧版本：2009年版本，使用 display：box / inline-box
混合版本：2011年版本，使用 display : flexbox  / i nline-flexbox
最新版本 ：使用 display : flex / inline-flex
2)兼容性
旧版本：box
ie Firefox chrome opera safari
no 2-21 4-20 no 3.1-6
最新版本
ie Firefox chrome opera Safari
11+ 22+ 21+ 12.1+ no
混合版本仅ie10支持
三、各版本属性差异
1）开启flexbox
标准版本 display :flex / inline-flex
混合版本 display : flexbox / inline-flexbox
最老版本  display :box / inline-box
2) 伸缩流方向
最老版本： box-orient 用来设置伸缩流方向，而box-direction用来设置伸缩项目在伸缩容器中的流动顺序。
box-orient: horizontal / vertical  /  inline-axis / block-axis
box-direction： normal / reverse 
混合版本：flex-direction : row / row-reverse / column  / column-reverse
最新版本 ：flex-direction : row /row-reverse / column / column- reverse 
3）伸缩换行 
最老版本：box-lines：single / multiple  目前还没浏览器支持
混合版本：flex-wrap: nowrap / wrap / wrap-reverse
最新版本 ：flex-wrap: nowrap / wrap / wrap-reverse
4）伸缩流方向与伸缩换行 （混合版本新增属性）
混合版本：flex-flow：<flex-direction > | <flex-wrap>
最新版本 ：flex-flow：<flex-direction > | <flex-wrap>

5）主轴对齐
最老版本：box-pack:start / end / center / justify
混合版本：flex-pack : start / end / center / justify /distribute
最新版本 ：justify-content: flex-start / flex-end /center / space-between / space-around
6)侧轴对齐
最老版本： box-align :start / end /center / baseline /stretch
混合版本：flex-align： start /end / center / baseline /stretch
最新版本 ：
align-items :flex-start / flex-end / center / baseline /stretch
align-self :同上。对于匿名项目如果伸缩项目的任一个侧轴上的外边距为auto，则align-self没有效果，如果align-self的值为auto，则其计算值为伸缩项目的伸缩容器的align-items值。如果该伸缩项目没有伸缩容器，则计算值为stretch。
7）伸缩性
最老版本：box-flex：<number>
混合版本：-ms-flex :<positive-flex ><negative-flex > <preferred-size > | none 
最新版本 ：flex : none | <flex-grow > | flex-shrink > ? || <flex-basis>  0/1/auto
8)堆栈伸缩行  针对的是群体
混合版本：flex-line-pack:start / end / center / justify / distribute / stretch
最新版本 ：align-content：flex-start / flex- end /center / space-between /space-around
9) 显示顺序
最老版本：box-ordinal-group : <integer> 默认值为1
混合版本：flex-order：<integer>默认值为0
最新版本 ：order:<number>

转载于:https://www.cnblogs.com/mian-bread/p/6729340.html

flex伸缩布局盒模型总结相关推荐

  1. flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  2. CSS3 Flex布局（伸缩布局盒模型）学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  3. flex布局单独一行_CSS3 Flex布局（伸缩布局盒模型）

    CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒(Flexible Box)模型,此布局对于设计比较复杂的页面非常有用,特别是"垂直居中"布局,非常容易实现. 一 ...

  4. CSS3 弹性布局盒模型 Flex布局

    Web 应用中,布局设计是非常重要的一部分.随着响应式设计的盛行,一般都要求 Web 应用能够适配不同尺寸的设备.响应式设计中最重要的一环就是布局,需要根据窗口尺寸来调整布局,从而改变元素的尺寸和位置 ...

  5. 移动WEB开发之flex伸缩布局

    学习目标 能够说出flex盒子的布局原理 能够使用flex布局的常用属性 能够独立完成携程移动端首页案例 1. flex布局体验 1.1 传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性, ...

  6. 弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

    弹性布局(flex布局.伸缩布局) 一.什么是弹性布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为fl ...

  7. flex伸缩布局之九宫格

    今天做微信小程序的时候,在布局的时候遇到了很大的麻烦,flex布局基本忘了.看了一下阮一峰前辈的博客,然后加上自己的一些理解. 这是九宫格效果图 这是html结构 这是css代码(重点,敲黑板) 首先 ...

  8. flex伸缩布局之携程网项目

    效果图如下: HTML代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...

  9. Webkit Flex伸缩盒模型属性备忘

    一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...

最新文章

  1. 淘宝的人工封IP技术真好玩
  2. MPO文件类型解码（四）3D图像整体结构
  3. php 安装redis php扩展
  4. android 筛选控件_Flutter学习六之实现一个带筛选的列表页面
  5. 机器视觉-halcon学习笔记1
  6. 【Vulnhub靶机系列】DC2
  7. 热血街头Java,下载_我爱法语 V3.01 多国语言版_6z6z下载站
  8. 怎么不保存退出、保存退出vim、vi编辑
  9. 数据通信原理_跟百哥学网络05同网段主机通信原理
  10. 遍历字典时用与不用iter的区别
  11. DSA——直接插入排序笔记
  12. HALCON-FUZZY检测用于开关引脚测量
  13. MTK6589反向修改拼包法操作流程
  14. 计算机查重公式编辑器,知网查重文字公式编辑器吗
  15. 地图上的两点，计算出两点之间的角度
  16. docker rabbitmq error： touch cannot touch ‘/etc/rabbitmq/rabbitmq.conf‘ permission denied
  17. 如何让固定资产管理不再一地鸡毛
  18. Paperreading之五  Stacked Hourglass Networks(SHN)和源码阅读（PyTorch版本）
  19. pytorch转换onnx，再转换caffe 测试caffe, pytorch 模型结果是否一致
  20. 八股文--Java基础下

热门文章

  1. Java项目:宠物商城系统(java+Springboot+Maven+mybatis+Vue+mysql)
  2. Properties持久的属性集
  3. nodejs 中间件 反向代理 接口转发
  4. bugku 杂项 就五层你能解开吗_你能解开这个和数字有关的逻辑解谜游戏吗？ | 每日一考...
  5. provide和inject，Vue父组件直接给孙子组件传值
  6. uniapp 上拉加载更多完整实现源码
  7. 05-dispatch_semphore
  8. iOS-仿膜拜贴纸滚动(物理仿真)
  9. Bzoj4566：[HAOI2016]找相同字符
  10. laravel中查看执行的SQL语句