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 它的所 ...
随机推荐
- Linux查看系统开机时间
有时候需要查看Linux系统运行了多久时间,此时需要知道上次开机启动时间: 有时候由于断电或供电故障突然停机,需要查看Linux开机时间/重启时间: 下面总结一些查看Linux开机关机时间的方法(非 ...
- BCP笔记整理(二)
BCP的基础用法可以参考上一篇:http://www.cnblogs.com/Gin-23333/p/5489889.html 这篇是补充一些有可能会用到,但是出场几率并不算大的几个参数 1.首先是 ...
- 如何快速简单上传类库到CocoaPods - 图文攻略步骤
当自己的库已经上传GitHub后,那么如何快速简单的开源自己的库呢? 这里就是介绍如何将自己的类库上传到pods管理库,以便开源所有人都能方便使用. 准备前提: - 项目已上传到GitHub (注意, ...
- 您不能在64位可执行文件上设置DEP属性
原因:32位的跟64位不匹配 解决方案: 更改文件目录为:C:\\Windows\SysWOW64dll\host.exe
- Java怎么添加背景图片
首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...
- 通过例子学习 Keystone - 每天5分钟玩转 OpenStack（19）
上一节介绍了 Keystone 的核心概念.本节我们通过“查询可用 image”这个实际操作让大家对这些概念建立更加感性的认识. User admin 要查看 Project 中的 image 第 1 ...
- php应用jquery做ajax操作
以下是全部代码: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <scr ...
- Sqlserver游标复习
经常写存储过程,但今天在游标使用过程中还是疏忽了一些事情,执行过程中一直执行不下去,后来直接sqlserver挂了,教训啊! 代码虽简单,望铭记: Create PROCEDURE [dbo].[te ...
- 【小白的CFD之旅】12 敲门实例【续2】
接上文[小白的CFD之旅]敲门实例[续] 主要内容 3 Solution3.1 Solution Methods3.2 Solution Controls3.3 Monitors3.4 Report ...
- Namesilo 管理域名教程
在NameSilo注册域名之后,我们要做的就是开始对域名进行日常管理应用.大家可以参照下面这个Namesilo域名管理图文教程进行相应的操作. 1. 登录域名管理列表并选择相应域名 首先,登录Name ...