2016 9月 17, 周六

flex使用

css, flex

容器（container）
采用伸缩性布局，首先必须设置父容器的伸缩性

 .parent{
      display:flex;
      display:-webkit-flex;
      display:-ms-flex;
      display:-o-flex;
      display:-moz-flex;
}

容器的属性
- display: //设置容器的伸缩性
- flex-direction: [row]|[column]|[row-reverse]|[column-reverse]//设置伸缩容器中子元素的流方向
- flex-wrap:[no-wrap]|[wrap]|[wrap-reverse]//设置换行的策略
- flex-flow://同时设置flex-direction与flex-wrap
- justify-content: [flex-start]|[flex-end]|[center]|[space-between]|[space-around]//设置伸缩项目在主轴上的对齐方式，如何使用剩余空间等
- align-item:[flex-start]|[flex-end]|[center]|[stretch]|[baseline]//设置项目在侧轴上的对齐方式
- align-content:[flex-start]|[flex-end]|[center]|[space-between]|[space-around]|[stretch] //类似justify-content，item在侧轴上如何对齐

容器的项(Item)

设置子项的排列顺序，伸缩比例等

item的属性

1. order:[number]//设置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在侧轴的对齐方式

对flex的理解
每个item的flex属性用来设置该item如何进行伸缩，伸缩的基准是什么
例：所有item的flex-basis值的和决定伸缩容器可再分配剩余空间的大小，跟item具体设置的width与height无关，当flex-basis=auto时，该item的flex-basis的值就是元素本身的大小（或者是css设置的width或height）
1
2
容器剩余的可分配空间 = 容器空间 - 每个item的flex-basis之和
flex-grow决定item站剩余空间的一个比例

当元素设置了flex-basis之后，剩余空间的分配一此为基础，为元素的width将无效。
只有在为元素设置了flex-grow之后元素才可以扩展，否者元素不会自动使用剩余的空间。
当item的宽度之和大于container时，元素是默认收缩的。

留言