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 它的所 ...
随机推荐
- crontab -e 每天定时备份mysql
contab -e 00 03 * * * mysqldump -u juandx --password=wenbin -d 'juandx$blog' -h host > /home/juan ...
- Reporting Service 服务启动时报错The service did not respond to the start or control request in a timely fashion
案例环境: 启动一台数据库服务器(Windows Server 2003)的Reporting Service(SQL Server 2008 R2)服务时,出现如下错误信息: System.Inva ...
- [AlwaysOn Availability Groups]排查：Primary上的修改无法在Secondary体现
排查:Primary上的修改无法在Secondary体现 客户端进程在primary上修改成功,但是在Secondary上却无法看到修改结果.这个case假设你的可用性组有同步的健康问题.很多情况下这 ...
- WebLogic: console 启动慢解决办法
找到WebLogic使用的JDK目录. 修改java_home/jre/lib/security/java.security文件: 将seucrerandom.source=file:/dev/ura ...
- 初探ansible安装
一.ansible介绍常用的自动化运维工具 Puppet —基于 Ruby 开发,采用 C/S 架构,扩展性强,基于 SSL,远程命令执行相对较弱SaltStack —基于 Python 开发,采用 ...
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理1
首先给上项目的整体框架图:,这里我没有使用BLL,因为感觉太烦了就没有去使用. 那么接下来我们首先先去Model层中添加Model. 管理员类: using System; using System. ...
- CentOS 7 恢复 Windows 启动项
安装Linux时一般会自动识别windows系统并添加引导项,而 CentOS 默认不支持 NTFS 分区,CentOS7采用了Grub2,与CentOS6有区别.手动引导windows分区修改配置稍 ...
- Error:Flash Download Failed-"Cortex-M3"
Error:Flash Download Failed-"Cortex-M3"出现一般有两种情况: 1.SWD模式下,Debug菜单中,Reset菜单选项(Autodetect/H ...
- 利用mysql-proxy进行mysql数据库的读写分离
实验系统:CentOS 6.6_x86_64 实验前提:防火墙和selinux都关闭 实验说明:本实验共有4台主机,IP分配如拓扑 实验软件:mariadb-10.0.20 mysql-proxy-0 ...
- MogileFS系统简单配置实例
实验原理: MogileFS是一个开源的分布式文件系统,用于组建分布式文件集群,由LiveJournal旗下DangaInteractive公司开发,Danga团队开发了包括 Memcached.Mo ...