上篇文章整理了关于盒模型的相关内容,今天了解下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对理解,由于阮大神写的文章实在太过详细,便不仔细介绍!