5分钟掌握FlexItem布局

属性点梳理

按照国际惯例,真正理解属性之前,我们首先需要知道项目存在哪些知识点。

> 容器内部项目属性  

1):order

容器内子项目的前后排列顺序。

2):flex-grow

规定容器内项目尺寸放大的比例。

3):flex-shrink

规定容器内项目尺寸缩小的比例。

4):flex-basis

该属性用于设置或检索弹性盒伸缩基准值。

5):flex
flex-grow、flex-shrink、flex-basis三个属性的集合,类似于margin这样的集合属性。
6):align-self
该属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。

这些定义如果现在看不懂也不要紧,接下来的部分我将以图文的方式详细得来展现各个属性的效果。

记忆和理解

好消息是这一块的属性,会涉及一些数学上的计算,那么1就是1,2就是2,会有助于我们进行理解。

order项目前后顺序

order属性只接受整数属性值。越小item项目排列顺序越靠前。

5分钟掌握FlexItem布局_第1张图片
order

flex-grow项目尺寸放大比例

该属性只支持int数值,默认值为1,0和负数将不起作用。
单位1剩余空间:(容器主轴方向尺寸-(所有item项目的尺寸和))/(所有item项目flex-grow相加的值)
那么在浏览器计算完成后,设置了该属性的item项目尺寸将会变成,初始尺寸值+单位1剩余空间值*本item的flex-grow值。要是想清楚的看到效果,尽量不要设置尺寸为auto。

5分钟掌握FlexItem布局_第2张图片
flex-grow

分析上图案例:外层容器宽度350px,每一个文档流项目宽度为100px,所以,那么第一行多出来350-300=50px,那么第一行单位1宽度为12.5px=50/(1+2+1),所以文档流1号宽度将变成112.5px,2号将变成125px。那么分行也是这么进行计算。

flex-shrink项目尺寸缩小比例

类似于flex-grow属性,单位1缩减空间计算值:(所有item项目尺寸和-容器尺寸)/(全部item flex-shrink 值的和)。

5分钟掌握FlexItem布局_第3张图片
flex-shrink

案例分析:flex容器主轴方向为水平左到右,宽度为200px,文档流项目宽度都为200px,单位1缩小尺寸=400/(1+2+4)=57.14px,那么就会产生一个问题:3号项目应该要缩小57.14*4=228.57px,这个时候如果3号项目没有内容,那么将不会进行展示,但是这个时候有内容,就撑起内容的宽度,导致出现计算上的偏差。

我的建议是:要想出现完美的缩小样式,还希望不要把容器的主轴尺寸设置的太小,并且也不要把项目的flex-shrink设置的太大,一旦缩小值比项目自身的尺寸还要大,要么就不会进行展示,要么就按照内部内容进行支撑。

flex-basis项目伸缩基准值

渲染项目主轴方向的尺寸之前,浏览器率先查看项目里面的basis属性的值。
那么我们就盘点该属性都有哪些可能的取值。

*1:auto
这个时候浏览器在计算布局的时候,先查看width或者是height,这个取决于主轴(flex-direction),是否有放大缩小的情况就取决于grow和shrink的属性设置。

2:非负数百分比
项目的尺寸的计算已经和本身的宽度和高度无关,那么初始尺寸就是flex容器尺寸
flex-basis。

*3:非负数像素尺寸
项目的尺寸初始值就是basis的值,然后在判断是否需要伸缩尺寸。

align-self 特立独行

该属性覆盖了父容器中的align-items属性值,一个不服从管教的孩子,大家都坐在一排,他却偏要做到教师最后一排,就是这么有个性。
既然是自己给自己下命令,那么可能存在的属性值就和align-items属性相同。

总结

本篇介绍了item项目上的flex弹性盒子的属性,东西不是很多,学习要点就是写布局之前需要在脑海中多进行建模,和计算,不用很精细的去计算,只要达到效果就行,只要在误差内就是一种可行的方式。

你可能感兴趣的:(5分钟掌握FlexItem布局)