baidu_ife_小薇学院总结（四）

发表于 | 分类于 |

Task8:响应式网格（栅格化）

1.目标：

使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局，根据屏幕宽度，元素占的栏数不同。

2.参考链接

Creating Your Own CSS Grid System

栅格化设计：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 07</title>
    <style type="text/css">
     *{margin: 0px;padding: 0px;}
      
      /*-- http://j4n.co/blog/Creating-your-own-css-grid-system  栅格化设计-- */ 
      /*-- The Container -- */ 
      .grid-container{
          width: 100%; 
          max-width: 1200px;   
      }
      /*-- The Row -- */ 
      /*-- our cleafix hack -- */ 
      .row:before, 
      .row:after {
          content:"";
          display: table ;
          clear:both;
      }
       
      /*-- The Column , Column Positioning , Column Widths , Column Gutters -- */ 
      .grid-container *{
          box-sizing: border-box;  /*-- setting border box on all elements inside the grid --*/
      }
      
      [class*='col-'] { /* a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。*/
          float: left; 
          min-height: 1px; 
          width: 16.66%; 
          /*-- Column gutter -- */
          padding: 12px; 
          background-color: #FFDCDC;
      }
      .col-1{ width: 16.66%; }
      .col-2{ width: 33.33%; }
      .col-3{ width: 50%;    }
      .col-4{ width: 66.66%; }
      .col-5{ width: 83.33%; }
      .col-6{ width: 100%;   }
      .outline, .outline *{
          outline: 1px solid #F6A1A1; 
      }
      /*-- some extra column content styling --*/
      [class*='col-'] > p {
       background-color: #FFC2C2; 
       padding: 0;
       margin: 0;
       text-align: center; 
       color: white; 
      }
    </style>
  </head>
<body>
    <div class="grid-container outline">
        <div class="row">
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
        </div> 
        <div class="row">
            <div class="col-2"><p>col-2</p></div> 
            <div class="col-2"><p>col-2</p></div> 
            <div class="col-2"><p>col-2</p></div> 
        </div> 
        <div class="row">
            <div class="col-3"><p>col-3</p></div> 
            <div class="col-3"><p>col-3</p></div> 
        </div> 
    </div>
</body>
</html>

移动端响应式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*screens under 800px*/
@media all and (max-width:800px){
    .col-1{ width: 33.33%;    }
    .col-2{ width: 50%;        }
    .col-3{ width: 83.33%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;      }
    .row .col-2:last-of-type{ /* p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。*/
        width: 100%; 
    }
    .row .col-5 ~ .col-1{  /*p~ul 选择前面有 <p> 元素的每个 <ul> 元素。相同的父元素,但是 element2 不必直接紧随 element1*/
        width: 100%; 
    }
}
/*screens under 650px*/
@media all and (max-width:650px){
    .col-1{ width: 50%;        }
    .col-2{ width: 100%;    }
    .col-3{ width: 100%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;      }
}

3.响应式 12 栏网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media all and (min-width:769px){
	.col-md-1{ width: 8.33%; }
	.col-md-2{ width: 16.66%; }
	.col-md-3{ width: 25%;    }
	.col-md-4{ width: 33.33%; }
	.col-md-6{ width: 50%;   }
}
/*screens under 800px*/
@media all and (max-width:768px){
  .col-sm-2{ width: 16.66%;   }
  .col-sm-3{ width: 25%;      }
  .col-sm-6{ width: 50%;      }
  .col-sm-8{ width: 66.66%;   }
  .col-sm-12{ width: 100%;    }
}

Task10:Flexbox 布局练习

image

1.Flex布局是什么？

W3C针对布局设计的新标准，相对float和position会更加灵活处理父元素和子元素之间布局关系，让布局更加直观和灵活简单。有效的针对不同屏幕宽度大小的情况下，让元素自动有效合理处理布局结构

2.Flexbox布局和网格布局的异同

弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。

3.Flex容器属性

  • flex-direction: row | row-reverse | column column-reverse;主轴方向
  • flex-wrap: nowrap | wrap | wrap-reverse;是否可以换行
  • justify-content: flex-start | flex-end | center | space-between | space-around;主轴上的对齐方式
  • align-items: flex-start | flex-end | center | baseline | stretch;交叉轴的对齐方式
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;多行轴线的对齐方式

    4.Flex项目属性

  • order
    根据order的值定义项目排列顺序。数值越小，排列越靠前，默认为0
  • align-self
    定义单个项目在交叉轴的对齐方式，可覆盖align-items属性
  • flex-grow
    定义项目放大比例，默认为0，当容器有剩余空间时不放大.
    重点在于，每个方块的 flex-grow 和其他方块的是成比例的。
  • flex-shrink
    定义项目缩小比例。默认为1，随着容器缩小而等比例缩小。
    如果设置为0，项目将不缩小。
  • flex-basis
    定义项目占据的主轴空间（main size）,默认是auto.
  • flex
    flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

    5.屏幕宽度小于640px

1
2
3
4
@media all and (max-width:640px){
   .container{align-items: flex-start;}
   .box1,.box2,.box3{order: 1;}
}

6.Flex属性设置

1
2
3
4
5
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: wrap;  /*是否可以换行（默认不换行）*/