11月5日 flex 属性 PHP中文网九期线上班

  一、将课堂中的全部案例照写一遍, 并达到默写级别

        1、flex-gorw 按设定值分配给栏目1和栏目3增长

           代码

h3>默认状态</h3>
<div class="contain demo1">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>
<h3>Flex-grow增长因子属性的用法</h3>
<div class="contain demo2">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>

css样式

.contain{border: #999999 1px solid;
       width: 300px;
       display: flex;}
.item{display: flex;
     background: aquamarine;
     width: 50px;
     border: black 1px solid;
      }
.demo2>.item:first-of-type{flex-grow: 0.2;}

.demo2>.item:nth-of-type(3){flex-grow:3;}

效果图片

2.flex-gorw 按宽度不一样增长

<h3>默认状态</h3>
<div class="contain demo1">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>
<h3>Flex-grow 宽度不一样增长因子属性的用法</h3>
<div class="contain demo2">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>

css

.contain{border: #999999 1px solid;
       width: 300px;
       display: flex;}
.item{display: flex;
     background: aquamarine;
     width: 50px;
     border: black 1px solid;
      }
.demo2>.item:first-of-type{
           width: 40px;
           flex-grow:0.9;}
.demo2>.item:nth-of-type(2){
          width: 30px;
            flex-grow:3;}

效果图

3、flex-shrink收缩因子用法，收缩因子为小数和整数，元素宽度不一样

代码

<h3>默认状态</h3>
<div class="contain demo1">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>
<h3>Flex-shrink 宽度不一样收缩因子不同</h3>
<div class="contain demo2">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>

css

.contain{border: #999999 1px solid;
       width: 300px;
       display: flex;}
.item{display: flex;
     background: aquamarine;
     width: 50px;
     border: black 1px solid;
      }
.demo2>.item:first-of-type{
           width: 40px;
           flex-shrink:0.9;}
.demo2>.item:nth-of-type(2){
          width: 30px;
            flex-shrink:3;}

效果图片

4、flex-shrink 宽度一样，收缩因子不同

<h3>默认状态</h3>
<div class="contain demo1">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>
<h3>Flex-shrink 宽度一样收缩因子不同</h3>
<div class="contain demo2">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>

css

.contain{border: #999999 1px solid;
       width: 300px;
       display: flex;}
.item{display: flex;
     background: aquamarine;
     width: 50px;
     border: black 1px solid;
      }
.demo2>.item:first-of-type{
           width: 40px;
           flex-shrink:0.9;}
.demo2>.item:nth-of-type(2){
          width: 40px;
            flex-shrink:3;}

效果图片

5、Flex-basis基准尺寸预设宽度按百分比分配

<h3>默认状态</h3>
<div class="contain demo1">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>
<h3>Flex-basis基准尺寸预设宽度按百分比分配</h3>
<div class="contain demo2">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>
</body>

css

.contain{border: #999999 1px solid;
       width: 300px;
       display: flex;}
.item{display: flex;
     background: aquamarine;
     width: 50px;
     border: black 1px solid;
      }
.demo2>.item:first-of-type{

           flex-basis:50%;}
.demo2>.item:nth-of-type(2){

            flex-basis:20%;}

效果图片

6.     Flex-basis:0 1 auto;1 1 auto; 0 0 auto；方式

<h3>默认状态</h3>
<div class="contain demo1">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>
<h3>Flex-basis:0 1 auto;1 1 auto; 0 0 auto；方式</h3>
<div class="contain demo2">
   <div class="item">栏目1</div>
   <div class="item">栏目2</div>
   <div class="item">栏目3</div>
   <div class="item">栏目4</div>
</div>

css

.contain{border: #999999 1px solid;
       width: 300px;
       display: flex;}
.item{display: flex;
     background: aquamarine;
     width: 50px;
     border: black 1px solid;
      }
.demo2>.item:first-of-type{

           flex-basis:0 1 auto;}
.demo2>.item:nth-of-type(2){

            flex-basis:1 1 auto;}
.demo2>.item:last-of-type{
   width: 90px;
   flex-basis:1 0 auto;}

效果图片

7    css  设置flexr的各种值用法

.contain{border: #999999 1px solid;
       width: 300px;
       display: flex;}
.item{display: flex;
     background: aquamarine;
     width: 50px;
     border: black 1px solid;
      }
.demo2>.item:first-of-type{

           flex:0 1 auto;}
.demo2>.item:nth-of-type(2){

            flex:1 1 auto;}
.demo2>.item:last-of-type{
   width: 90px;
   flex:1 0 auto;}

图片

css flex另外一种方式

   contain{border: #999999 1px solid;
       width: 300px;
       display: flex;}
.item{display: flex;
     background: aquamarine;
     width: 50px;
     border: black 1px solid;
      }
.demo2>.item:first-of-type{

           flex:initial;}
.demo2>.item:nth-of-type(2){

            flex:auto;}
.demo2>.item:last-of-type{
   width: 90px;
   flex:1 0 auto;}

图片

小结： flex: 0 1 auto    等于  flex: inital

            flex: 1 1 auto     等于 flex: auto

           flex: 0 0 auto      等于 flex: none

flex的增长因子flex-gorw，收缩因子flex-thrink、基准尺寸 flex-basis,   可以直接用flex:(inital/auto/none简写

2. 将flex属性的用法, 手抄, 建议二遍以上

手写

      总结  在这次的作业中，发现之前的基础知识不熟悉，比如忘记写display转成块元素，忘记在标签前面加点号等

  3.4.5的作业没有写，但是会抽空写完整