关键词：
做为css布局的又一种新方式，Flex拥有极强的使用效果，相比原来的float，position对元素样式的操作更加简洁，本文是我的一点学习经验和心得吧，如有错误以及不足之处，请多多指点。
好进入正题吧，首先借用阮一峰大神的一副图片：
再来说说flex的几个属性吧：
一、容器属性
1.flex-direction : row | row-reverse | column | column-reverse;
这个属性是定义元素在主轴上的排列顺序的，也就是上面的（main axis）
row：元素在主轴上以水平的方向排列的，起点在左端（同时，这个也是默认值）
row-reverse：元素在主轴上以水平的方向排列的，起点在右端
column：元素在主轴上以垂直的方向排列的，起点在上方
column-reverse：元素在主轴上以垂直的方向排列的，起点在下方
光说不练假把式，贴上代码：
效果如下：
2.flex-wrap：nowrap | wrap | wrap-reverse;
这个属性是定义如果元素在一根轴线上排列不下后该如何排列：
nowrap：不换行（默认）
wrap ：换行，并且第一行在上方
wrap-reverse：换行，第一行在下方，逆向排列
代码贴上：
效果如下：
3.flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4.justify-content：flex-start | flex-end | center | space-between | space-around
这个属性是定义元素在主轴上的对齐方式
flex-start：主轴的起点对齐（默认）
flex-end：主轴的终点对齐
center：主轴的中点对齐
space-between：俩端对齐，元素之间的间隔相等
space-around：元素的俩侧间隔相等，以元素及俩端为对齐方式
代码贴上：
效果如下：
5.align-items：flex-start | flex-end | center | baseline | stretch
这个属性是相对justify-content来说的，他是规定元素在交叉轴上的对齐方式的
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字对齐
stretch：如果元素的高度没有设置或者设置为auto，则元素将占满容器的高度
贴上代码：
效果如下：
6.align-content：flex-start | flex-end | center | space-between | space-around | stretch;
这个属性是规定有多根轴线时的对齐方式，如果只有一根轴线，不起作用
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉点的终点对齐
space-between：与交叉轴的俩端对齐，轴线之间的距离相等
space-around：每根轴线的俩侧距离相等
stretch：轴线占满整个交叉轴
二、元素属性
1.order：<integer>
这个属性定义元素的排列顺序，数值越小，排列越靠前，默认是0
贴上代码：
结果如下：
2.flex-grow：<number>
该属性定义元素放大比例，默认为0，0表示的是即使有剩余空间也不放大
如果所有的元素的这个值都为1，那么这些元素将等分剩余空间，如果其中有一个大于1的元素，那么这个元素占有的剩余空间比别的大N倍
贴上代码：
效果如下：
3.flex-shrink：<number>
这个属性是定义元素的缩小比例，默认值为1，如果剩余空间不足，则元素缩小
如果所有元素的这个属性都为1时，当空间不足时，将等比例缩小。如果一个元素的这个属性为0，其余都为1，那么空间不足时，属性为0的元素不缩小
贴上代码：
效果如下：
注意：负值对该属性没有作用
4.flex-basis：<length> | auto
这个属性定义在分配多余空间前，元素占主轴的大小，以此来计算主轴上是否还有多余空间，默认值为auto，也就是元素原本大小
5.flex：none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
这个属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为（0 1 auto）
该属性有俩个快捷值：auto和none
贴上代码
效果如下：
对于这三个属性，我是这样理解的：flex-grow相当于一大堆地主，准备瓜分主轴的“土地”，但地主里面也有相对厉害的，比如属性值更高的，他就瓜分的土地多，
而flex-shrink相当于一群很好的朋友，互帮互助，主轴的“土地”不够的话，大家一起减少“土地”，但是里面却出现了一个恶霸，也就是属性值为0的，他不管这么多
在他看来，爱咋咋滴，没我事情。最后flex-basis相当于算账的，计算主轴剩余的“土地”还剩下多少，计算后，再让那俩个属性自己去分剩余的“土地”。
当然，flex也有缺点，就是他对于手机浏览器的兼容还没做到位，有些手机浏览器还不能辨识。
flex布局文档学习及实践
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来布局的首选方案。Flex是Flex... 查看详情
flex布局学习记录(代码片段)
...:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 采用Flex布局的元素 称之为Flex容器 它的所有子元素自动成为容器成员 称为flexitem 容器默认存在两根轴 水平的主轴,垂直的交叉轴 容器的属性flex... 查看详情
flex布局学习(代码片段)
...?utm_source=tuicoolFlex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。设为Flex布局以 查看详情
flex弹性布局学习
一、介绍 flex（flexiblebox：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：二、了解两个基本概念： 容器：需... 查看详情
flex布局学习记录
一·何为弹性布局 Flexbox布局的主要思想：给容器控制项目（子元素）的宽度和高度的能力，项目可自动填充容器的可用空间，以达到适配所有类型的设备和屏幕大小的目的。项目可自动放大以填补充可用空间，这是其他布... 查看详情
flex布局弹性布局学习
先让我们看看在原来的学习中遇到的问题之前在软件工程的大作业中，自己从零开始学习如何开发一个网站，从页面，到后台，当然数据库是大二的必修课在学习如何编写一个静态页面的时候，完全是自学，自己摸索，所以遇到... 查看详情
display:flex;多行多列布局学习
从以前的table布局到现在的div布局，再到未来的flex布局，CSS重构方面对展示行和适应性的要求越来越高； 首先来比较一下布局方式的更新意义： table布局： 优点：1、兼容性好，ie6、ie7或者什么稀奇... 查看详情
(转)30分钟学会flex布局
原文链接：https://zhuanlan.zhihu.com/p/25303493最简单实用的Flex布局教程，30分钟让你学会Flex语法基础。为什么我要写这一篇关于Flex布局的教程？因为它十分简单灵活，区区简单几行代码就可以实现各种页面的的布局，以前我在学习页... 查看详情
flex布局
最近在学前端知识时，经常听到学长们说flex布局，自己学习的时候无论w3c官方教程，还是教科书，参考书都没有说过关于布局的问题，自己找了点资料，理论加实践学习一下flex布局 一：什么是flex布局：布局的... 查看详情
css基础之flex布局
...——————1.什么是flexflex是FlexibleBox的缩写,意为弹性布局flex布局中把一个元素作为容器，容器中的子元素称为项目可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。2.... 查看详情
flex布局教程：语法篇(摘抄，学习中)(代码片段)
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种... 查看详情
flex布局全解析
参考技术A很长一段时间,我知道有flex这个布局方式,但是始终没有去学它.3点原因:最近由于开发需要,学习了下WeUI的实现,发现里面大量使用了flex布局,于是决定学习一下.FlexboxLayout,官方名为CSSFlexibleBoxLayoutModule,意为"弹性布局",是CSS... 查看详情
flex
Flex布局教程：实例篇学习阮大大的Flex布局,想看原文请移步:阮一峰介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布... 查看详情
今天学习了flex布局(代码片段)
...。https://css-tricks.com/centering-css-complete-guide/ 布局的传统解决方案，基于盒状模型，依赖 display属性+ position属性+ float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W 查看详情
cssflex弹性布局学习总结
一、简要介绍 flex（flexiblebox：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。 主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其中在webkit内核... 查看详情
css学习_css3伸缩布局flex布局
1、flex布局 案例一： 案例二： 保证不至于缩放得太小或太大 案例三：flex的值不一定要写成几份，可以写成固定值 案例四： 竖着3等分（父容器按照高度3等分）!!案例 -----用... 查看详情
flex布局学习记录(代码片段)
...:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 采用Flex布局的元素 称之为Flex容器 它的所有子元素自动成为容器成员 称为flexitem 容器默认存在两根轴 水平的主轴,垂直的交叉轴 容器的属性flex... 查看详情
flex布局学习
flex布局解决了几个问题1 margin重叠问题例如.item{border:1pxsolidgreen;margin:30px;} <divstyle="border:1pxsolidred;"><divclass="item">margin重叠为</div><divclass="item">2</div&g 查看详情