发表于： 2017-04-12 21:46:54
1 570
今天完成的事情：
完成了任务13。
此任务没有遇到难点。
一 在不用bs的情况下，应用到了不定宽布局的知识。
1 使用flex实现：两端固定，中间自适应
父元素使用display:flex,两端子元素设置固定宽度，中间部分使用flex:1。
flex:1与item中的效果等同
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
flex-grow设置或检索弹性盒的扩展比率
flex-shrink 设置或检索弹性盒的收缩比率
flex-basis 设置或检索弹性盒伸缩基准值
2 用table方式实现：两端固定，中间自适应
父元素中使用display:table,table-layout:fixed
三个子元素都设定为table-cell，然后两端子元素固定宽度即可。
table-layout:fixed;使列宽由表格宽度和列宽度设定。
二 图中在拉伸窗口宽度时，方块宽度不变，间距自适应
用flex完美解决
这三个方块的父元素设置display:flex和justify-content:space-between即可
明天的计划：
开始任务14.
遇到的问题：
无
收获：
css原子类能提高开发效率，可重复使用。
返回列表
评论