由于母上之前做的手术伤口愈合不是很好,最近一段时间,转移到隔壁市区的市医院进行后续的治疗,家里实在抽不出人来照顾,无奈之下我只好停下手头上的所有工作,前来陪护。利用最近一段闲余时间,在学习尚硅谷前端剩下的部分,最近学到了flex弹性盒子,内容有点多,但是总结一下发现也并不是很多,有内在的逻辑,写本文就是梳理,总结一下自己的理解。

首先是平面由两个互相垂直的轴构成,一个是水平方向(row),另一个是竖直方向(column),在flex中有主轴和辅轴两个轴的定义。
对于主轴的确定,主要是看flex-direction后面的值,然后justify-content是用来调整主轴的,以align开头的都是调整辅轴的,
常见的可选的值有:flex-start,flex-end,center等等。对于主轴上还有额外的space-between和space-around,自己亲身体验就能够很清楚明白。

另外此处安利一个网站,以游戏的方式来熟悉flex布局,flex练习

Last modification:August 12th, 2020 at 10:31 pm
如果觉得我的文章对你有用,请随意赞赏