发表于： 2018-05-22 23:45:51
2 667
今天完成的事情：
使用flex完成页面2的思路没有理好，先做页面3，今天完成。
上午根据阮一峰的flex文章配合其它教程能够简单使用，在页面3 两处使用
1 红框中需要分居左右两侧，右侧底部对齐
左右两侧
子元素底部对齐
2 底栏两个按钮
两侧分配空间
明天计划的事情：
完成页面2，提交代码
遇到的问题：
1 下面这部分想让图标作为底图
为了显示底图，设置定高，对于底图大小设置宽度随高度自适应，保证在不同屏幕下显示相同。
2 flex-basis和width比较
主要根据这篇文章理解，在flex-grow和flex-shrink为0时flex-basis根据自己的设定值计算受到最值宽度限制，没有设定时才会查找设定的width或者内容宽度。
https://www.jianshu.com/p/17b1b445ecd4
Flex Items的应用准则
content –> width –> flex-basis (limted by max|min-width)
也就是说，
- 如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小
- 如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小
收获：
flex布局相对于传统布局确实方便，在flex容器设置之后就在布局方面可以适应多数情况，而传统布局只能单个设置要作用的元素，步骤繁琐，影响因素较多。
但是使用flex布局之后不再关心盒子大小，只需要让它达到布局的效果，没有传统布局那种精细控制元素的能力，可以让元素在几个像素之间变化。
任务13
开始时间：5.17
预计结束时间：5.21
延期：3天
http://task.jnshu.com/zentao/project-task-629.html
返回列表
评论