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 它的所 ...
随机推荐
- Windows 双网卡指定网络出口
主要命令: ipconfig route ping tracert 指定外网路由通过本地以太网连接出去 route add -p 0.0.0.0 mask 0.0.0.0 192.168.10 ...
- SQLSERVER2008 R2安装说明
SQLSERVER2008 R2安装说明一. 安装环境:SQLSERVER2008 R2有32位版本和64位版本,32位版本可以安装在WINDOWS XP及以上操32位和64位的操作系统上,如果服务器 ...
- SQL SERVER 重组含有特殊字符的索引时遇到“关键字 'with' 附近有语法错误.”
案例描述 这是在索引重组过程中遇到的有意思的错误案例,搜索了一下也没有看到相关资料,估计我第一个碰到这类错误的人(It's just a joke).具体情况是YourSQLDba在做维护数据库索引时 ...
- WinForm登陆：窗体间的数据传递
1. 登陆逻辑 FrmMain 为主窗体(启动窗体) FrmLogin 为登陆窗体 在“主窗体”中使用ShowDialog()方法显示“登陆窗体”,并通过“登陆窗体”的DialogResult告知“主 ...
- Spring MVC拦截器+注解方式实现防止表单重复提交
原理:在新建页面中Session保存token随机码,当保存时验证,通过后删除,当再次点击保存时由于服务器端的Session中已经不存在了,所有无法验证通过. 注,如果是集群的方式,则需要将token ...
- Vim自动补全神器–YouCompleteMe
一.简介 YouCompleteMe是Vim的自动补全插件,与同类插件相比,具有如下优势 1.基于语义补全 2.整合实现了多种插件 clang_complete.AutoComplPop .Super ...
- 解决虚拟机VMware安装CentOS7.0识别不到网卡
由于Vmware虚拟网卡和linux兼容问题导致驱动无法正常安装,默认的网卡类型不兼容. 解决方法 找到我们的Vmware虚拟机文件夹,将VMware 虚拟机配置 (.vmx),追加一条设置我们网卡类 ...
- CentOS 6.5下Redis安装记录
Redis简介: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工 ...
- centos 7 install python spynner
yum install python-devel yum install libXtst-devel pip install autopy pip install spynner import spy ...
- Sql server2012 常见异常处理
网络相关 无法通过IP(127.0.0.1 或者其他本机)连接 确保TCP/IP功能开启 打开1433端口 权限相关 代理的权限,通过更改有最高权限的用户,或者给该用户指定的权限 给域用户开通SQLS ...