发表于： 2019-03-04 23:30:27
1 855
今天完成的事情：
复习position和display的用法，重点学习了flex的用法。
父容器中：
控制主轴方向的flex-direction:
控制主轴子容器排列方式的justify-content：
控制交叉轴排列方式的align-items:
子容器中：
控制子容器伸缩比例的flex
控制子容器交叉轴排列方式align-self
控制子容器先后顺序order
在这个基础上完善任务四
明天计划的事情：
根据今天遇到的问题，修改任务四
遇到的问题：
用过align-items可以做到垂直居中，但是图片和输入框的高度并不相同，如果设置高度100%就会因为子容器div高度相同导致div中的内容垂直居中失败。
将父容器中的子容器也设为flex可以解决。衍生出新问题，对于最高父容器来说，下面承载img和input的子容器div原本可以使用flex设置宽度比，因为将此div设置成了父容器，是的它使用flex无法正确显示。设置承载input的div容器宽度能解决，但前面承载img的div容器设置了固定像素，后面设置百分比可能影响显示。
收获：
学习到了使用flex进行布局，可以通过其很好的做到水平、垂直居中一起其他一些需要的对齐排版方式
返回列表
评论