CSS flexbox

一.基本概念

1. 容器（container）

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

     .parent{

          display:flex;

          display:-webkit-flex;

          display:-ms-flex;

          display:-o-flex;

          display:-moz-flex;

    }

 

• 容器的属性

          1. display: //设置容器的伸缩性

          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的属性

          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在侧轴的对齐方式

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时，元素是默认收缩的。