发表于： 2019-07-08 22:27:30
1 884
这几天一直没继续任务，原因是卡在了一个地方，百思不得其解
header占了body高度的7%，大图占了23%，footer占了10%，剩下的60%我分配给了main，然后把main设置为弹性盒子
弹性布局的子元素也就是弹性项目（items）里面的文字或图片无论如何无法居中，弹性项目可以有flex-start，flex-end，center，space-between，space-around等对齐方式，但是如何实现高度自动等分容器呢？
仔细读了阮一峰的那篇博客后多次试验总算明白问题出在哪里，只需将项目的flex-grow均设为1即可等分父容器，并且，不用给项目添加position（如果非要添加，只能设为relative，如果是absolute则会重合在一起，这点不是很明白），可见弹性之强大简洁！
弹性盒子可以嵌套使用，即容器的项目可以看成一个新容器
此外还要注意后代选择器的书写真的是一个大坑，mai.bar和main .bar的效果天壤之别，这是很容易忽视并且造成莫名其妙bug的一个细节
PS真的是渣，切了返回的箭头但是不会去掉背景色，也就是弄成只有一个蓝色箭头，背景全透明，直接导致了图标和header的颜色重合出现加深效果
返回列表
评论