align-items 是在nowrap时,对一行进行的设置
align-content 是在wrap时,对所有进行的设置。
子元素:
flex-grow :默认值是0 。 他们分配的是剩下的空间,如果没有剩下的空间,就没效果。
flex-shrink:默认值是1.它是指在进行压缩的时候,他的收缩能力。值越大,收缩的越快。
flex-basis: 设置成百分比,可以直接决定他占用的宽度。默认是auto。默认的时候就根据flex-grow。
如果 flex-direction 被设置成了 column,其实相当于把屏幕左旋90度。然后按照正常的方式进行设置。
order 不是flex-order!
如果我们设置了具体的宽度200px---使用flex-grow设置了,并且可以换行wrap。如果容器的宽度小于总的宽度和了,最后一个元素会随着宽度不够被挤下来。
display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; http://www.runoob.com/try/try.php?filename=trycss3_flex-basis http://www.45it.com/css/201407/37606.htm flex-basis :如果设置成具体的值,是 所占的值就是 容器宽度*(自己的值/所有值的和) 如果是百分比: 凑够100%,就按上面算。 flex-grow 是受宽度影响的, flex-basis 被挤下来之后,是否去占满还是保持原位置留空,要看flex-grow 设置,如果设置为0,表死不对剩余空间处理,就会留空。