flex布局

1、背景介绍

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，


2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

2、知识剖析
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 任何一个容器都可以指定成flex布局


3.常见问题
flex-wrap 在开发时用这个来让项目换行，当给了父级高度时，如果只有俩项目，那么这两个项目会平分容器高度，比如，父级容器height：200px；当使用wrap的时候这两个项目的高度各100px; 三个项目就继续平分。


如果想调节项目间的距离可以使用margin，padding来解决，也可以在刚开始不给容器高度，给项目高度来撑开； IE10下面使用flex-wrap，需要给容器设置宽度，并且项目要设置为块元素 ，行内元素使用flex-wrap不会自动换行。


同一个元素同时使用position(absolute、flexd)和flex时 ，flex属性会失效，解决办法就是在flex元素外面再套一层父级来使用position属性，父级要设置宽度！，相对定位不会导致felx失效！

编码实战：要让一个元素变成伸缩容器，需要使用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（默认值）：轴线占满整个交叉轴

参考文献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:可以的

视频链接：https://v.qq.com/x/page/e0705hswfc7.html