flex布局(第二篇)——项目属性 简述什么是flex布局,有哪些主要属性及值的设置

上篇是关于flex布局容器属性的，想要了解的可以在小白前端主页看哦~

1、order 属性

oder:integer(整数)

order 属性定义项目的排列顺序, 数值越小，排列越靠前，默认为0。（可以为负值）

2、flex-grow 属性

flex-grow:number /* default 0 */

（1）flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

（2）如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。

（3）如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

（3）如果有的项目没有 flex-grow 属性，有 flex-grow 属性的项目将等分剩余空间。

3、flex-shrink 属性

flex-shrink:number /* default 1 */

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

（1）如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。

（2）如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

（3）负值对该属性无效。

4、flex-basis 属性

flex-basis: length | auto; /* default auto */

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5、flex 属性

flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6、align-self 属性

align-self: auto | flex-start | flex-end | center | baseline | stretch

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

喜欢文章的可以关注小白前端~~