简单的了解一下flex的容器属性

简单的了解一下flex的容器属性

1、背景介绍

ss3引入了一种新的布局模型-flex布局。flex是flexible box的缩写，一般称之为弹性盒模型。
和css3其它属性不一样，flexbox并不是一个属性，而是一个模块，包括多个css3的属性。
flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型设备和各种尺寸的屏幕。

2、知识剖析
要让一个元素变成伸缩容器，需要使用display属性。采用flex布局的元素，称之为伸缩容器（flex container），容器内的子元素称之为伸缩项目（flex item）。
注意，浏览器会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目。
使用flex布局实际上是使元素FFC化（flex formatting context伸缩格式化上下文），FFC是普通流的一种。而浮动流和定位流对FFC是有影响的。
伸缩容器默认存在两条轴：水平的主轴（main axis）和垂直的侧轴（cross axis）或者说是交叉轴。
注意，主轴方向不一定是水平的，它主要取决于flex-direction属性。
主轴起点叫main start，主轴终点叫main end；侧轴起点叫cross start，侧轴终点叫cross end。


以下6个属性作用在伸缩容器是：伸缩流方向:flex-direction；伸缩流换行：flex-wrap；伸缩流（包括方向和换行）：flex-flow；主轴对齐：justify-content；侧轴对齐：align-items；堆栈伸缩行：align-content。


flex-direction属性决定主轴的方向（即项目的排列方向）。一般情况下flex-direction有四个值：row（默认值）：主轴为水平方向，起点在左端；row-reverse：主轴为水平方向，起点在右端；column：主轴为垂直方向，起点在上沿；column-reverse：主轴为垂直方向，起点在下沿。


flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-wrap属性一般有三个值，nowrap（默认）：不换行；wrap：换行，第一行在上方；wrap-reverse：换行，第一行在下方。


flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。justify-content属性定义了项目在主轴上的对齐方式。flex-start（默认值）：左对齐；flex-end：右对齐；center： 居中；space-between：两端对齐，项目之间的间隔都相等；space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。  


align-items属性定义项目在交叉轴上如何对齐，它一般有五个值。flex-start：交叉轴的起点对齐；center：与交叉轴的中点对齐；space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍； stretch（默认值）：轴线占满整个交叉轴。     

3、常见问题
flex的布局在熟练以后非常好用，但是pc兼容性相对较差，IE要10，甚至11以上才能要很好的兼容。可以通过查看内核了解是否支持    
.box {


                        display: -webkit-flex;
                        
                        display: -ms-flexbox;
                        
                        display: flex;
                        

                        }

4、参考文献

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Q：flex有时候也会有bug，不知道是不是电脑问题，比如有次用space-between，也没有任何padding，margin，但就是没有相切。

A：一般这种情况可以清理电脑缓存试试。

Q: 交叉轴和主轴有时候会被某个属性颠倒？

A:items属性可以做到。

Q:items父级设置了flex，子级还能设置吗？

A:可以的