flex布局
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子元素。
参考:
https://blog.csdn.net/scorpion_V/article/details/125563670 //有图参考
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