今天完成的事：

一、掌握了flex:1;的原理

flex是flex-grow|flex-shrink|flex-basis的缩写

flex: 1 1 20px;

flex-grow是容器的剩余宽度的扩展比率

flex-shrink与grow相反，是缩放比率，但是计算方式不同

flex-basis是元素的基础宽度值

举例：

flex-grow

<div class="row2">
    <div class="grow1">flex-grow=1</div>
    <div class="grow2">flex-grow=2</div>
    <div class="grow3">flex-grow=3</div>
</div>

.row2 div {
    border: 1px solid black;
    word-break: break-all;
    flex-basis: 0;
}

.row2 {
    display: flex;
    width: 100%;
}

基础宽度为0，按照flex-grow规则，增加的宽度按照1:2:3来分配，因为基础宽度为0，所以三个元素的宽度比也是1:2:3

flex-shrink：

.row1 {
    display: flex;
    width: 100%;
}

.row1 div {
    flex-basis: 300px;
    border: 1px solid violet;
}

<div class="row1">
    <div class="flex-shrink-1">1</div>
    <div class="flex-shrink-2">2</div>
    <div class="flex-shrink-3">3</div>
</div>

设置基础宽度为300px，当容器宽度不足900时，按照1:2:3的比例来减少宽度

注意，与flex-grow在扩展时简单地按比例分配不同，flex-shrink的收缩算法会稍微复杂一些，公式如下：

当前项收缩的宽度 = ( 当前项flex-shrink 当前项flex-basis / 所有项flex-shrink 与各自flex-basis乘积之和 ) * 需收缩的总宽度

二、学习了BFC

bfc的目的是防止上下两个元素的margin重叠

个人比较喜欢用flex，overflow：hidden也还可以，而且由于bootstrap4的.row已经变成了flex，所以套用框架后基本不用再担心margin问题

三、学习了两个声明

！default，是指默认情况下，没有被其他设置取代时生效

！global，指强制使用，不管其他设置

四、学习了一个选择器

CSS3 :nth-of-type() 选择器

select {
  flex:1;
  margin: 5px 0;
  color: $font-color;
  outline: none;
  border: none;
  text-align: justify;
  text-align-last: center;
  &:nth-last-of-type(2) {
    border-left: $border1;
    border-right: $border1;
  }
}

意思是选择父元素下的第二个select元素

五、编写任务12

第一个页面基本完成，还有一些小细节需要调整

遇到的问题：

使用@media修改sass变量时，不生效

@media screen and (max-width:500px) {
  $padding: 0;
}

想让宽度小于等于500px时，$padding为0

但是没有效果，如何使用@media修改sass的变量？

明天计划：

完成任务12

学习任务12深度思考小课堂

收获：

今天阅读了大量的资料，任务12的学习资料基本过了一遍，对于构建自己的框架有了初步的理解

看了flex:1;和flex:aotu;的区别，还是有点晕，明天继续，参考资料https://www.cnblogs.com/chris-oil/p/5430137.html