css新特性 box-flex/flex 弹性盒状模型
新接触的，可是我的张大神早在2010年就写了box,box-flex的用法
大神把box-flex用狗血电视剧分家产剧情比喻，生动形象地说明，让我理解得容易了些，唉大神好贴心，举例说明满分
------------------
首先，是历史介绍
- box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）
- inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）
- flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）
- inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）
- flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）
- inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）
- 第一种：display:box; 或者是一个属性box-*;那么你看到的是2009年以前的Flexbox。
- 第二种：display:flexbox，或者是一个函数flex()，那么你看到的是2011这个中间版本的Flexbox。
- 第三种：display:flex，或者其他flex-*的属性，那么你看到的是比较新的规范
--------------------------------------------------------------------------------------------------------------
flex，Flexible Box让所有灵活的项目都带有相同的长度，忽略它们的内容：
为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
其实分配的都是针对剩余空间，也就是除去元素内容（文字）后的空间是成比例的。
flex生效需定义其父元素display为flex或inline-flex(box或inline-box，这是旧的方式)
display: flex | inline-flex; (适用于父类容器元素上)
- flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
- inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex;
display: flex;
}
----------------基本概念--------
采用Flex布局的元素，称为Flex容器（flex container），简称"（父）容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"（子）项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
----------------容器的属性--------
以下6个属性设置在容器(父元素)上。(Firefox、Opera 和 Chrome 支持)
flex-direction：属性决定主轴的方向（即项目的排列方向）
flex-wrap ：拆行
flex-flow ：方向+拆行
justify-content：定义了项目在主轴上的（水平）对齐方式，各项目周围留有空白
align-items
align-content
1,方向
.box {
flex-direction: row（默认值） | row-reverse | column | column-reverse;
}
2,拆行
.box{
flex-wrap:nowrap（默认值）| wrap | wrap-reverse;
}
3，flex-flow :方向+拆行，所以默认值为两者的默认值 row nowrap
4，justify-centent:水平对齐+自动间距，当然，如果没有可用空间时，即排版挤满了是没有效果的
.box {
justify-content: flex-start（默认） | flex-end | center | space-between | space-around;
}
5，align-items，居中对齐。
IE11、Firefox、Chrome 和 Opera 支持 align-items 属性。Safari、IE 9 及其之前的版本不支持 align-items 属性。IE 10 需要前缀 -ms-。
.box {
align-items: stretch（默认） | flex-start | flex-end | center | baseline(项目的第一行文字的基线对齐);
}
以下代码作为测试
<html>
<head>
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
align-items:strech;//此处加不加都一样
}
#main div
{
//flex: 1;
}
#div1{
width:40px;height:50px;
}
#div2{
width:50px;height:60px;
}
#div3{
width:70px;height:70px;
}
</style>
</head>
<body>
<div id="main">
<div id="div1" style="background-color:coral;font-size:8px;">aa</div>
<div id="div2" style="background-color:lightblue;font-size:28px;">bb</div>
<div id="div3" style="background-color:pink;font-size:12px;">cc</div>
</div>
<p><b>注意：</b>Safari 不支持 align-items 属性。</p>
</body>
</html>
图：1.psd
align-content，灵活对齐，必须有多行的项目，该属性才能渲染出效果。仅Chrome 和 Opera 支持
.box {
align-content: stretch（默认） | flex-start | flex-end | center | space-between | space-around; }
------------------------------------------------------------------------------------
灵活运用见Flex 布局教程：实例篇
比如，高度不定的图片，文字要在div中垂直居中，用这个就行啦
.box {
display: flex;
justify-content: center;
align-items: center;
}
参考文章：
css新特性 box-flex/flex 弹性盒状模型的更多相关文章
- display:box；display:flex；弹性盒模型
display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...
- 2017 css新特性
2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东 ...
- 深入理解 CSS3 弹性盒布局模型
Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...
- CSS3 弹性盒布局模型(转)
简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...
- CSS盒状模型简介
CSS盒状模型 在平时的开发过程中还是经常得写博客,这2天有个公司找我面试,在面试当中提到了CSS中的盒状模型.这个东西在平时的前端开发经常用到.以下简单介绍一下: CSS中的盒状模型由:margin ...
- 2017年学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 【译】2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- flexbox（弹性盒布局模型）,以及适用场景
一.是什么 Flexible Box 简称 flex,意为"弹性布局",可以简便.完整.响应式地实现各种页面布局 采用Flex布局的元素,称为flex容器container 它的所 ...
随机推荐
- 通过jconsole监控tomcat JVM 内存、线程、CPU
从Java 5开始 引入了 JConsole,来监控 Java 应用程序性能和跟踪 Java 中的代码.jconsole是JDK自带监控工具,只需要找到 JDK 安装路径,打开 bin 文件夹,双击 ...
- vim linux下查找显示^M并且删除
linux下 ^M的输入方法是ctrl+v然后再ctrl+m vim下在文件中显示^M:e ++ff=unix % 在文件中删除^M:%s/^M$//g 在linux下查找^Mfind ./ | xa ...
- 下一代Asp.net开发规范OWIN（3）—— Middleware
Middleware是OWIN管道的基本组成单元,最后拼接的OWIN管道来处理客户端请求,输出网页.这篇文章,首先看看Web Form, MVC, Web API如何结合OWIN使用. 然后将如何编写 ...
- SQL Server修改数据库对象所有者(Owner)浅析
在SQL Server数据库中如何修改数据库对象(表.视图.存储过程..)的所有者(Owner)呢?一般我们可以使用系统提供的系统存储过程sp_changeobjectowner来修改. 我们先看看s ...
- CentOS RedHat YUM 源扩展补充（32位、64位均有）
一般情况下强烈建议在CentOS6下面使用YUM配置安装LAMP环境,一些兄弟也很喜欢使用编译的安装方法,个人觉得如果不是对服务器做定制,用yum安装稳定简单,何必去download&make ...
- 【java开发】分支语句、循环语句学习
一.Java分支语句类型 if-else 语句 switch 关于if-esle语句可以拆分为三种 if语句 if(条件){语句块;} if-else语句if(条件语句){语句块;} if-else ...
- ubuntu 下安装 texlive 并设置 ctex 中文套装
1 安装 texlive2013 1.1 下载 texlive2013 下载地址:http://ftp.ctex.org/mirrors/CTAN/systems/texlive/Images/tex ...
- springmvc 上传下载
springmvc文件上传下载在网上搜索的代码 参考整理了一份需要使用的jar.commons-fileupload.jar与commons-io-1.4.jar 二个文件 1.表单属性为: enct ...
- 关于Composer——好久不动手了。。。
六月第一“血” 看书,发现喜欢从尾开始读起,然后 php经典实例 中,最后一章是PEAR内容,知乎上一查,完,过时了,完全都是Composer,那就学一下吧 一.啥东西 一句话:依赖管理工具: 解释: ...
- C#学习笔记-数据的传递以及ToolStripProgressBar
代码: 方法一:窗体的代码-->可以直接通过预设的Click事件来实现控制进度条. public partial class Form1 : Form { public Form1() { In ...