flex布局

什么是flex布局？

flex是flexible Box的缩写,意为"弹性布局" ,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。   

        

    传统布局，传统布局兼容性好 布局繁琐，不能再移动端很好的布局，各项比较麻烦.

相较于flex布局操作方便 ,布局极为简单,移动端应用很广泛，PC端浏览器支持情况较差局限性,IE 11或更低版本,不支持或仅部分支持。

 

 

 

        就拿下图如何把三个小方块做成水平排列来说：

       如下图是以传统布局与flex布局对三个小方块做水平对齐的对比图与解释：

传统布局首先需要把display:inline;把块级元素转换为行内元素，并且小方块的宽和高会被限制，这时候就还要去给它设置宽高会比较麻烦，也可以用左浮动把它做水平排列，但是之后还要给它消除浮动也是比较繁琐。

        

 

 

        

flex布局就只需要在其类里设置转化为flex布局就可以轻松解决而且不需要给它设置宽高也不用之后给它取消什么设置，更加快速的完成我们想要效果。

 

 

注意：

当我们为父盒子设为flex布局以后,子元素的float、clear 和vertical-align属性将失效。

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用Flex布局的元素,称为Flex容器( flex container ) , 简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目( flex item ) , 简称"项目"。

体验中div就是flex父容器。

体验中span就是子容器flex项目

子容器可以横向排列也可以纵向排列

总结flex布局原理:

就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。

以上。