flex学习笔记

     flex是弹性布局，使用flex布局需要注意浏览器兼容性问题，需要IE10以上的浏览器才支持这个属性。flex跟传统布局不一样，没有块级和内联的概念。flex由两部分组成，父容器flex container，子元素flex item。另外一个flex有主轴和侧重，里面元素的排列方式是基于主纵轴排列的。弹性布局下float不生效，相邻margin不重叠，column不起作用，clear属性没有效果，vertical-align没有效果。伪元素first-line和first-letter不使用。

     使用flex布局先将display的属性设置为flex。flex父容器有flex-direction、flex-wray、justify-content、align-items这四个属性。

    flex-direction是设置子元素排列方式他有四个属性，分别为row，row-revers,column,column-reverse。column是从上到下排列，column-revers是从下到上排列，row是从左到右排列，row-reverse是从右到左排列。direction没有配置默认为row。

    flex-wrap这个这是否换换行，它有三个属性wrap、nowrap、和wrap-reverse。warp是换行，nowrap是不换行，wrap-reverse是换行，与第一个的区别是第一行内容在上，这个第一行内容在下。默认情况为wrap。

flex-flow是flex-direction和flex-wrap的复合属性，用法为flex-flow：row wrap；需要注意的是flex-low有些浏览器并不支持，比如虽让IE10可以使用flex，但IE10并不支持flex-flow。

justify-content是内容对齐，有flex-start、flex-end、center、space-between和space-around5个属性，flex-direction的区别用两张图对比

flex-direction：

justify-content：

总的来说flex-direction设置的是内容顺序，justify-content设置的是位置。

align-items则是设置纵轴的排列方向，如图

另一个相似属性是align-content，与align-items，他定义多根轴线的对其方式。

子元素有三个属性，分别为flex-basic、flex-grow、flex-shrink，order属性。flex-basic设置设置宽度，用法flex-basic：<宽度>，默认为auto，即元素内容大小，flex-grow设置相对其他子元素放大倍数，用法flex-grow：2，它的宽度将是其他元素的2倍；flex-shrink设置相对其他元素缩小倍数，用法flex-shrink：2，他的宽度将是其他元素的1/2。order则是子元素的排列顺序，默认为0，可以为负值，按小到大排序，用法order：1；

最后还有一个属性是align-self，跟align-item差不多，区别在于align-self是针对一个flex子元素。

参考：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

https://www.w3cschool.cn/cssref/css3-pr-align-self.html

https://www.w3cschool.cn/css3/2h6g5xoy.html