响应式 文字的设置

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

rem 案例

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

 

em  案例

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

       

 flex布局添加的小知识点

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

 

二.flex布局

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

     容器的属性(父级添加的属性)

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

 在项目上(子集)设置的属性  order flex-grow 

1.order属性 :定义项目的排列顺序;

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

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

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

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

 设置头部脚部时设置 flex-grow:1 响应式 字体设置 flex 弹性布局

 

 3.flex-basis属性

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

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

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

 

相关文章:

  • 2021-05-12
  • 2021-06-25
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-23
  • 2021-11-19
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-27
相关资源
相似解决方案