CSS flexbox
一.基本概念
1. 容器(container)
- 采用伸缩性布局,首先必须设置父容器的伸缩性
.parent{display:flex;display:-webkit-flex;display:-ms-flex;display:-o-flex;display:-moz-flex;}
- 容器的属性
2. flex-direction: [row]|[column]|[row-reverse]|[column-reverse]//设置伸缩容器中子元素的流方向
3. flex-wrap:[no-wrap]|[wrap]|[wrap-reverse]//设置换行的策略
4. flex-flow://同时设置flex-direction与flex-wrap
5. justify-content: [flex-start]|[flex-end]|[center]|[space-between]|[space-around]//设置伸缩项目在主轴上的对齐方式,如何使用剩余空间等
6. align-item:[flex-start]|[flex-end]|[center]|[stretch]|[baseline]//设置项目在侧轴上的对齐方式
7. align-content:[flex-start]|[flex-end]|[center]|[space-between]|[space-around]|[stretch] //类似justify-content,item在侧轴上如何对齐
2. 容器的项(Item)
- 设置子项的排列顺序,伸缩比例等
- item的属性
2. flex-grow:[number]//该值默认为0,即当有剩余空间时也不会放大去使用剩余空间
3. flex-shrink:[number]//该值默认为1,当item的空间大于容器的空间时,item会进行缩放
4. flex-basis:[number]//该值默认为auto,即item会根据item类容本身的尺寸来决定,flex-grow与flex-shrink的比例
5. align-self://设置item在侧轴的对齐方式
3. 对flex的理解
每个item的flex属性用来设置该item如何进行伸缩,伸缩的基准是什么
例:所有item的flex-basis值的和决定伸缩容器可再分配剩余空间的大小,跟item具体设置的width与height无关,当flex-basis=auto时,该item的flex-basis的值就是元素本身的大小(或者是css设置的width或height)
容器剩余的可分配空间 = 容器空间 - 每个item的flex-basis之和
flex-grow决定item站剩余空间的一个比例
当元素设置了flex-basis之后,剩余空间的分配以此为基础,为元素设置的width将无效。
只有在为元素设置了flex-grow之后元素才可以扩展,否者元素不会自动使用剩余的空间。
当item的宽度之和大于container时,元素是默认收缩的。