display:box;display:flex;弹性盒模型

非常适用于移动端。PC端高级浏览器,效果也很好。

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
这是老版本的写法,09年之前的。这样给外面的父元素设置了这5个属性之后,这个div就是弹性盒子模型了。
里面的元素就可以自由分配空间了,在一行,而不需要浮动布局float了

而弹性伸缩盒的原理就是给父元素声明一个display:box伸缩盒属性后,就代表是把整个盒子里的块元素都变成了内联元素,然后这个父元素里面的子元素就可以自由分配空间了,而不会每个块元素各占一行,而是协商共同排在一行上面。可以这么理解。
比如下面例子
--------------html-----------------
<div class="box">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
--------------css------------------
.box {
width: 330px;
height: 400px;
border: 1px #000 solid;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
}

.box p {
width: 100px;
height: 20px;
background: #000;
margin: 5px;
}
-----------------end-------------------
这div里面的3个p标签会在一行展示,而不是上下层级分配

2011年之后出现了display:flex;
1、首先,新版本设置伸缩盒的display属性如下:
display:flex;将容器盒模型作为块级弹性伸缩盒显示(新版本)
display:inline-flex;将容器盒模型作为内联级弹性伸缩盒显示(新版本)
例如:
div{
display:flex;
}
大部分新版浏览器基本都不用使用前缀了,目前应该只有苹果浏览器需要带webkit前缀,其他都可以正常显示。
box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意,设为Flex布局以后,子元素的 float 、 clear 和 vertical-align 属性将失效。

二、弹性伸缩盒的属性
1、box-orient属性
box-orient主要实现盒子内部元素的流动方向。我们看看他们的属性值如下:
A、box-orient:horizontal;伸缩项目从左到右水平排列。默认值
B、box-orient:vertical;伸缩项目从上到下垂直排列。
C、box-orient:inline-axis;伸缩项目沿着内联轴排列显示。
D、box-orient:block-axis;伸缩项目沿着块轴排列显示。
一般我们就默认就行了。
2、box-direction属性
主要是设置伸缩容器中元素的流动顺序。
属性值:
box-direction:normal;默认值,正常顺序。
box-direction:reverse;逆向排列,也就是倒着排列的意思。
3、box-pack属性
用于伸缩项目的分布方式。
它的属性值如下:
box-pack:start;伸缩项目以起始点靠齐。
box-pack:end;伸缩项目以结束点靠齐。
box-pack:center;伸缩项目以中心点靠齐。
box-pack:justify;伸缩项目平均分布,也就是两边排列的意思。-webkit-支持,-moz-不支持。
不过你如果不给父元素div添加宽度为100%的话,是显示不出效果来的,因为div添加了display:box;属性后,这个div就不是普通盒子了,而是伸缩性盒子了,随里面内容伸缩。所以我们必须给他强制添加一个宽度,这样设置了box-pack排列属性才会有效果。比如:
div{
width:100%
-webkit-box-pack:end;
}
这样才会有效果的,也就是从结尾即从右侧向左侧排列的了。如果我们设置成center就变成居中了。
4、box-align属性
用来处理伸缩容器的额外空间。
有五个属性值:
box-align:start;伸缩项目以顶部为基准,清理下部分额外空间。
box-align:end;伸缩项目以底部为基准,清理上部分额外空间。
box-align:center;伸缩项目以中部为基准,平均清理上下部额外空间;
box-align:baseline;伸缩项目以基线为基准,清理额外的空间;
box-align:stretch;伸缩项目填充整个容器,是默认值。

例如:
div{
-webkit-box-align:center;
}
就是垂直居中对齐的意思,而清理上下额外空间就是p模块容器里的内容正好填满,不显示多余的空间。

综合网络很多资源,得以总结理解,多谢下面链接作者,仅此备份,便于自己理解。

参考链接:
http://blog.tianya.cn/post-5475416-98043238-1.shtml
http://www.ql2015.cn/web/divcss/425.html/2
http://www.ql2015.cn/web/divcss/425.html/3
http://www.tuicool.com/articles/UneAJju
http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/

display:box;display:flex;弹性盒模型的更多相关文章

  1. Flex 弹性盒模型

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

  2. Web的Flex弹性盒模型

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

  3. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  5. box flex 弹性盒模型(转载)

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  6. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  7. flex弹性盒模型

    flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...

  8. Flex弹性盒模型(新老版本完整)--移动端开发整理笔记(二)

    Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...

  9. flex 弹性盒模型的一些例子;

    1.垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  10. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

随机推荐

  1. 阿里云服务器部署php的laravel项目,在阿里云买ECS 搭建 Linux+Nginx+Mysql+PHP环境的

    在阿里云买ECS的时候选择自己习惯的镜像系统,我一般都是使用Linux Ubuntu,所以,以下的配置都是在Ubuntu 14.04稳定支持版的环境中搭建Linux+Nginx+Mysql+PHP环境 ...

  2. Android ImageLoader(Android-Universal-Image-Loader)【1】概述及使用简单介绍

     Android ImageLoader(Android-Universal-Image-Loader)[1]概述及使用简单介绍 一,前言:为什么要引入Android-Universal-Imag ...

  3. vue-router实例

    最近刚刚用vue写了个公司项目,使用vue-cli构建的,算是中大型项目吧,然后这里想记录并且分享一下其中的知识点,希望对大家有帮助,后期会逐渐分享:话不多说,直接上代码!! main.js // T ...

  4. 面向矩阵的numpy入门笔记

    我先声明我学numpy的目的:在python中使用矩阵(我需要在机器学习中使用矩阵),所以我的目的很明确,矩阵: 矩阵在numpy中叫ndarray(The N-dimensional array), ...

  5. MongoDB 数据库备份与恢复

    1.MongoDB数据库备份     1.语法:         mongodump -h dbhost -d dbname -o dbdirectory         参数说明:         ...

  6. 由一道bash jail题引出的琐事@_@

    关键词:Terminal devices.shell.stdio 题目入口: (需要注册) root@kali:~# ssh level1@24.37.41.154 -p 1016 level1@24 ...

  7. web项目错误页面友好处理404,500等

    写在前面: 在web项目中,可能会出现404.500等错误页面,给用户体验不怎么好,所以我们可以对这些错误页面进行友好的处理. 步骤: 1.配置web.xml: <!-- 错误页面友好显示 -- ...

  8. DataBase MongoDB基础知识记录

    MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...

  9. java随机生成验证码

    package com.yuyuchen.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; im ...

  10. DeepLearning.ai学习笔记(三)结构化机器学习项目--week1 机器学习策略

    一.为什么是ML策略 如上图示,假如我们在构建一个喵咪分类器,数据集就是上面几个图,训练之后准确率达到90%.虽然看起来挺高的,但是这显然并不具一般性,因为数据集太少了.那么此时可以想到的ML策略有哪 ...