HTML5高级工程师实现Flex弹性布局前端js教程（未删节版）
display:flex设置窑具有弹性特性
任何容器都可以指定为Flex 布局。
具有Webkit核心的浏览器必须添加-webkit前缀。
使用Flex 布局的元素称为Flex 容器（flex 容器），简称“容器”。它的所有子元素都会自动成为容器成员，称为Flex items（弹性项目），简称“items”。
例子
div{
显示：-webkit-flex；
显示：柔性；
}
容器默认有两个轴：水平主轴和垂直交叉轴。主轴的起始位置（与边界相交）称为主起点，结束位置称为主终点；交叉轴的起始位置称为交叉起点，结束位置称为交叉终点。
默认情况下，项目沿主轴排列。单个项目占用的主轴空间称为主尺寸，单个项目占用的横轴空间称为交叉。
尺寸
flex-direction 属性决定主轴的方向
•flex-direction:行水平排列
•flex-direction: row-reverse 水平反向排列
•flex-direction:列垂直排列
•flex-direction: column-reverse 垂直反向排列
例子
•div{
•display:-webkit-flex；
•display: flex；
•border:solid 1px #000；
•flex-direction:column-reverse；
•}
flex-wrap 无法排列时如何换行？
•flex-wrap: nowrap 不换行（默认）
•flex-wrap: 换行，第一行位于顶部
•flex-wrap: 换行-反向换行，下面第一行
nowrap（默认）：不换行
换行：换行，第一行在顶部
nowrap（默认）：不换行
例子
•div{
•display:-webkit-flex；
•display: flex；
•border:solid 1px #000；
•flex-direction:column-reverse；
•}
justify-content 属性定义项目在主轴上的对齐方式
justify-content: flex-start 左对齐（默认）
•justify-content: 弹性端右对齐
justify-content:居中居中对齐
•justify-content: 间距两端对齐
•justify-content: space-around 每个项目两侧的间距相等。
align-items 属性定义项目如何在横轴上对齐
•align-items: flex-start 顶部对齐
•align-items: 柔性端底部对齐
•align-items:中心居中对齐
•align-items: 拉伸项目没有设置高度或设置为
auto，将占据容器的整个高度（默认）
align-content 属性定义多个轴的对齐方式
• 如果项目只有一个轴，则此属性无效
语法
•align-content:flex-start 顶部对齐
•align-content:flex-end 底部对齐
•align-content:居中居中对齐
• space- Between 与横轴两端对齐，轴之间的间距均匀分布
•space-around 每个轴两侧的间距相等。拉伸轴占据整个横轴（默认值）
order 属性定义项目的排序顺序。值越小，排名越高。默认值为0。
语法
•部分{
•订单：0；
•}
flex-grow 属性定义项目的放大比例
• 如果所有项目的flex-grow 属性都为1，它们将均分剩余空间（如果有）。如果一个item的flex-grow属性为2，其他item都为1，则前者占用的剩余空间是其他item的两倍。
• 默认为0，即有剩余空间则不放大。
语法
•部分{
•flex-grow: 2；
•}
flex-shrink 属性定义项目的收缩率。默认为1，即如果空间不足，则item会缩小。
• 如果所有项目的flex-shrink 属性都为1，当空间不足时，它们都会按比例缩小。
• 如果其中一项的flex-shrink 属性为0，其他项为1，则当空间不足时，前者不会收缩。
• 负值对该属性无效
align-self 属性允许单个项目以不同于其他项目的方式对齐，从而覆盖align-items 属性。
•align-self: flex-start 顶部对齐
•align-self: 柔性端底部对齐
•align-self: center 居中对齐
•align-self: 拉伸项没有设置高度或者设置为auto，会占据容器的整个高度（默认）
用户评论
艺菲
哇，这个教程太棒了！我一直想学习Flex布局，这个未删节版能让我更深入地理解，太感谢了！#Flex布局 #HTML5
有16位网友表示赞同！
那伤。眞美
终于找到这个教程了，之前试了好几个，都不如这个全面。#Flex弹性布局 #前端开发
有9位网友表示赞同！
枫无痕
这个教程太详细了，我从头看到尾，学到了好多新的东西。#HTML5高级工程师 #Flex布局
有5位网友表示赞同！
我家的爱豆是怪比i
对于初学者来说，这个教程可能有点难度，但绝对值得一看。#Flex弹性布局 #前端js教程
有8位网友表示赞同！
莫飞霜
我之前总是搞不懂Flex布局，现在看了这个教程，感觉豁然开朗。#未删节版 #Flex布局
有19位网友表示赞同！
oО清风挽发oО
作为一个老前端，我觉得这个教程很适合入门，希望作者能继续更新。#HTML5 #Flex弹性布局
有13位网友表示赞同！
Hello爱情风
看了这个教程，感觉自己之前的Flex布局知识都是渣渣。#前端js教程 #Flex布局
有13位网友表示赞同！
煮酒
这个教程太实用了，我已经在项目中用上了Flex布局，效果非常好。#Flex弹性布局 #前端开发
有14位网友表示赞同！
你是梦遥不可及
这个教程好长啊，但我还是坚持看完了，学到了好多！#HTML5高级工程师 #Flex布局
有6位网友表示赞同！
墨城烟柳
这个教程有点深奥，但我相信坚持下来一定会有收获。#Flex弹性布局 #前端js教程
有20位网友表示赞同！
繁华若梦
我一直觉得Flex布局很神奇，这个教程让我对它有了更深的认识。#HTML5 #Flex弹性布局
有18位网友表示赞同！
绳情
这个教程对于初学者来说，可能需要花更多时间去理解。#Flex弹性布局 #前端开发
有20位网友表示赞同！
看我发功喷飞你
作为一个前端工程师，这个教程对我来说非常有帮助，感谢作者！#HTML5高级工程师 #Flex布局
有20位网友表示赞同！
一个人的荒凉
这个教程太全了，从基础到进阶都有涉及，对于提升技能很有帮助。#Flex弹性布局 #前端js教程
有13位网友表示赞同！
我绝版了i
看了这个教程，我决定重新审视我的Flex布局代码，希望能做得更好。#HTML5 #Flex弹性布局
有17位网友表示赞同！
半梦半醒i
这个教程让我对Flex布局有了全新的认识，真的很感谢！#未删节版 #Flex布局
有7位网友表示赞同！
命运不堪浮华
作为一个前端爱好者，这个教程让我对Flex布局有了更深的兴趣。#Flex弹性布局 #前端js教程
有8位网友表示赞同！
荒野情趣
这个教程让我对HTML5有了更深的理解，Flex布局的应用让我眼界大开。#HTML5高级工程师 #Flex布局
有9位网友表示赞同！
别在我面前犯贱
这个教程太详细了，几乎涵盖了Flex布局的所有方面，强烈推荐给所有前端开发者。#Flex弹性布局 #前端开发
有14位网友表示赞同！
花海
虽然有点长，但这个教程确实值得一看再一看，每次都能学到新的东西。#HTML5 #Flex弹性布局
有9位网友表示赞同！