响应式 字体设置 flex 弹性布局

 响应式 文字的设置

rem 案例

 

em  案例

       

 flex布局添加的小知识点

 

 

二.flex布局

 

     容器的属性（父级添加的属性）

   1. flex-direction：规定里面的子项目是如何排列的

    

row 决定里面的子项目事如何排列的

 

 2. Flex-wrap属性:决定子元素在一条轴线上放不下，是否换行

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

 

 

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

 

 

5 . Align-content：规定交叉轴方向的对齐方式

 

 在项目上（子集）设置的属性  order flex-grow 

1.order属性 ：定义项目的排列顺序；

2.flex-grow属性：定义项目的放大比例  （flex-shrink:定义项目的缩小比例）

 设置头部脚部时设置 flex-grow:1 

 

 3.flex-basis属性

  

4.align-self属性:允许单个项目有与其他项目不一样的对齐方式