前端布局---flex弹性布局

        上篇文章整理了关于盒模型的相关内容，今天了解下flex弹性布局，主要说明弹性布局的思想以及我对弹性布局对理解，具体详细内容可参考阮一峰大神的文章，写的非常之详细 --- http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

      相对于盒模型来说：

• 优点：灵活、易用、响应式

• 缺点：兼容性差---ie10以上支持

 理解：

• 通过display: flex; 设置flex容器。

• 每个容器默认存在两个轴，横向为主轴，纵向为交叉轴

操作容器内部（布局）：

可理解为串糖葫芦 ------ 布局时，把各个区域分为用竹签串起来，（可以横向串，可以纵向串），每个单独的区域可想像成山楂。

• 可控制从横向串纵向串 ------flex-direction

• 竹签太长可换行 ------flex-wrap

• 通过改变竹签的位置去改变整体的位置 (整体靠上、整体靠下、整体居中) ------ justify-content（横向对齐方式）、align-items （纵向对齐方式）

• 山楂可大小、形状不一------flex-shrink、flex-grow、flex-basic 属性控制每个单独的区域占父级元素的几分之几，或者等分

• 可变换串糖葫芦时每个山楂的先后顺序，即每个山楂的位置 ------order属性控制

• 某个山楂想脱离竹签自己去占位 ------ align-self

以上为我对flex对理解，由于阮大神写的文章实在太过详细，便不仔细介绍！

     

转载于:https://www.cnblogs.com/sunweinan/p/flex.html