响应式布局内容

响应式布局

课堂目标

1. 掌握flex布局
2. 掌握网格布局
3. 掌握响应式布局

知识点

flex 布局（弹性布局）参考

1. 分为主轴（main axis）和交叉轴（cross axis）

flex容器属性：

1. flex-direction：设置主轴的方向，默认 row

   • row（默认值）：主轴为水平方向，起点在左端
   • row-reverse：主轴为水平方向，起点在右端
   • column：主轴为垂直方向，起点在上沿
   • column-reverse：主轴为垂直方向，起点在下沿

2. flex-wrap：定义换行方式，默认不换行 nowrap

   • nowrap（默认）：不换行
   • wrap：换行，第一行在上方。
   • wrap-reverse：换行，第一行在下方

3. justify-content：定义了项目在主轴上的对齐方式，默认 flex-start

   • flex-start：左对齐
   • flex-end：右对齐
   • center：居中
   • space-between：两端对齐，项目间间隔都相等
   • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

4. align-items：定义项目在交叉轴上如何对齐，默认 stretch

   • flex-start：交叉轴的起点对齐
   • flex-end：交叉轴的终点对齐
   • center：交叉轴的中点对齐
   • baseline: 项目的第一行文字的基线对齐
   • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

5. align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

   • stretch（默认值）：轴线占满整个交叉轴
   • flex-start：与交叉轴的起点对齐
   • flex-end：与交叉轴的终点对齐
   • center：与交叉轴的中点对齐
   • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
   • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

项目的属性：

1. order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
2. flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3. flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，负值无效
4. flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小。
5. flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
6. flex属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
7. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

grid 布局（网格布局）

容器属性：

1. grid-template-columns：定义每一列的列宽

2. grid-template-rows：定义每一行的行高

   .container {
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 100px 100px 100px;
   }
   

3. repeat()：接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。重复某种模式也是可以的.

   .container {
     display: grid;
     grid-template-columns: repeat(3, 33.33%);
     grid-template-rows: repeat(3, 33.33%);
   }
   grid-template-columns: repeat(2, 100px 20px 80px);
   

4. auto-fill :关键字
   有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

   .container {  display: grid; 
                 grid-template-columns: repeat(auto-fill, 100px);
   }
   

5. fr 关键字
   为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍.

   .container {  display: grid;  
                 grid-template-columns: 1fr 1fr; }
   

6. minmax():函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

7. auto关键字表示由浏览器自己决定长度。

8. 网格线的名称:grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，