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 它的所 ...
随机推荐
- MySQL学习笔记之视图
视图是对磁盘上保存的表数据的抽象,即抽取一个表或多个表的部分行或列的数据,展示给使用者. 首先列举下MySQL中最简单的对视图操作的语法: 1.创建视图: create view 视图名 as sel ...
- Win7 安装SQL SERVER 2012需要SP1补丁
在操作系统Win7上安装SQL Server 2012时,报如下错误: 也就是说SQL Server 2012如要要安装在Windows 7 上,则至少需要安装SP1补丁.否则就会弹出上面提示信息.关 ...
- 使用管道符在PowerShell中进行各种数据操作
最近在培训PowerShell,在讲到Pipeline的时候,对于我这种长期和数据(数据库)打交道的人来说,觉得很实用,所以写此博文,记录一下. 无论是在Linux中写Bash脚本还是在Window上 ...
- W3School-CSS 分类 (Classification) 实例
CSS 分类 (Classification) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...
- Spark快速入门 - Spark 1.6.0
Spark快速入门 - Spark 1.6.0 转载请注明出处:http://www.cnblogs.com/BYRans/ 快速入门(Quick Start) 本文简单介绍了Spark的使用方式.首 ...
- Linux下java进程CPU占用率高分析方法
Linux下java进程CPU占用率高分析方法 在工作当中,肯定会遇到由代码所导致的高CPU耗用以及内存溢出的情况.这种情况发生时,我们怎么去找出原因并解决. 一般解决方法是通过top命令找出消耗资源 ...
- hortonworks2.5.3 install step log
1.创建本地YUM源,下载TAR.GZ HDP,HDP-UTILS,AMBARI介质安装HTTPD,在/VAR/WWW/HTML/下创建三个相应的目录,把以上解压的三个目录链接过来在三个目录中执行命令 ...
- [WPF系列]-DataBinding 绑定计算表达式
Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={Stat ...
- [No000081]SVN学习笔记1-服务端搭建
目录 一:SVN服务器搭建和使用. 1.首先来下载和搭建SVN服务器,地址http://subversion.apache.org/packages.html 2.安装完成后,启动VisualSVN ...
- JavaScript从数组中删除指定值元素的方法
本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个 ...