精通css3flex弹性布局
精通flex弹性布局
在远古时代，兼容ie6的年代使⽤float、position+display传统⽅式布局，经常会遇到⼀些奇奇怪怪的布局问题，所以在css3中的flex布局就营运⽽⽣，也就是弹性布局。
⼀、兼容性
⽬前为⽌已经有超过98%的浏览器已经全⾯⽀持flex布局(除⾮你的项⽬属于远古时代的项⽬)，所以基本都可以使⽤flex布局。
⼆、注意要点
如果使⽤了flex布局之后，容器中⼦元素中的以下属性会全部失效: float、clear和vertical-align；
如图，没有flex之前：
使⽤flex之后：
三、基础理论
当设置容器属性为display:flex之后，容器中的所有⼦元素都会⾃动flex项⽬，也就是flex-item，俗称项⽬。容器默认有两根轴，⽔平的主轴和垂直的交叉轴，项⽬默认是沿主轴排序，项⽬占据主轴空间称 main-size ，项⽬占据交叉轴的空间称 cross-size，如图：
四、容器有6个属性
flex-direction、flex-wrap、flex-flow、justity-content、align-items、align-content；
4.1、flex-direction 属性是主轴布局排列的⽅向，有4个属性值，如下：flex布局详细讲解
flex-direction: row; －－－－－－－默认值，⽔平⽅向，靠左对齐；
flex-direction: row-reverse; －－－⽔平⽅向，靠右对齐；
flex-direction: column; －－－－－垂直⽅向，向下对齐；
flex-direction: column-reverse; －垂直⽅向，向上对齐
4.2、flex-wrap属性是主轴决定项⽬(box)是否换⾏，有3个属性值，如下：
flex-wrap: nowrap; 默认值，强制不换⾏；
flex-wrap: wrap; 溢出换⾏，按顺序⾏排列；
flex-wrap: row-reverse; 溢出换⾏，按倒序⾏排列；
4.3、flex-flow属性其实是flex-direction和flex-wrap的简写集合，如下：
flex-flow: flex-direction || flex-wrap;
4.4、justify-content属性是主轴决定项⽬(box)对齐⽅式，有5个属性值，如下：justify-content: flex-start; －－－－－－－默认值，靠左对齐；
justify-content: flex-end; －－－－－－－ 靠右对齐；
justify-content: center; －－－－－－－－居中；
justify-content: space-between; －－－－两端对齐，项⽬之间的间隔相等；
justify-content: space-around; －－－－－－－项⽬之间的边距相等，可以理解成每个项⽬都设置⼀个左右外边距（margin:0
10px）；所以中间布局看起来会有边距的两倍；
4.5、align-items属性是交叉轴决定项⽬(box)对齐⽅式，有5个属性值，如下：
align-items: flex-start; －－－－－－－靠顶部对齐；
align-items: flex-end; －－－－－－－ 靠底部对齐；
align-items: center; －－－－－－－－ 向中间对齐；
align-items: baseline; －－－－－－－ 靠右对齐；
align-items: stretch; －－－－－－－ 项⽬没设定⾼度或者为auto的时候，设置项⽬(box)⾼度充满容器的⾼度；
4.5、align-content属性是交叉轴决定项⽬(box)对齐⽅式，有6个属性值，如下：
align-content: flex-start; －－－－－－－靠顶部对齐；
align-content: flex-end; －－－－－－－靠底部对齐；
align-content: center; －－－－－－－中间对齐；
align-content: space-between; －－－－－－－ 间距与justity-content: space-between效果⼀样，前者是⽔平，后者是垂直；；align-content: space-around; －－－－－－－ 间距与justity-content: space-around效果⼀样，前者是⽔平，后者是垂直，相当于（margin:10px 0）；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。