发表于: 2021-03-17 20:05:39
1 1096
今天完成的事情:任务五代码调试,任务四总结,flex的知识初步了解。
明天计划的事情:看任务五深度思考,巩固任务四五所要记住的知识。
遇到的问题:
inline(行内属性);block(块级属性)和inline-block(行内块级属性)运用的还不灵活!
收获:flex-start(弹性盒子)的初步了解和运用:
1,flex布局:及弹性布局,给盒状模型提供最大的灵活性。任何容器都可以指定为flex布局。
但,设定了flex布局后,子元素中的float(浮动),clear(消除浮动),vertical-align(垂直 对齐)属性将失效。
2,采用flex布局的元素,称为flex容器;它的所有子元素自动成为容器成员,称为flex项目。
容器默认存在两根轴:水平的主轴和垂直的交叉轴;项目默认沿主轴排列。
3,下面为容器的属性,设置在容器上:
flex-direction属性:决定主轴的方向,及项目的排列方向。
flex-wrap属性:定义项目如果在一条轴线上排不下,的换行方式。
flex-flow属性:它是flex-direction属性和flex-wrap属性的简写式,默认值为row nowrap.
justify-content属性:定义项目在主轴上的对齐方式。
align-items属性:定义项目在交叉轴上如何对齐。
align-content属性:定义多根轴线的对齐方式。如果项目只有一根轴线,则该属性不起作用。
order属性:定义项目的排列顺序。默认值为 0.
flex-grow属性:定义项目的放大比例。默认为 0.及如果所剩空间再大,也不会放大。
flex-shrink属性:定义项目缩小比例,默认为 1,及空间不足该项目将缩小。
flex-basis属性:定义项目在分配多以空间之前,项目占据的主轴空间。
flex属性:这个属性为flex-grow属性,flex-shrink属性和flex-basis属性的简写,默认值为 0 1 auto.
align-self属性:允许单个项目和其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto.
表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch .
评论