CSS笔记——Flex、Grid布局、css响应式布局

CSS布局方式

一、弹性盒模型Flex

阮一峰网络日志：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 布局是 CSS3 引入的一种新的布局方式，用于创建灵活的、自适应的网页布局，其主要思想是将容器分为一个或多个弹性项目，并且可以通过设置弹性项目的属性来控制其在容器中的排列和分布。
弹性盒子布局是一种灵活的布局模式，可以根据容器的大小和内容的大小来自适应地调整布局。使用 Flexbox 布局时，可以将网页中的元素按照一定的比例分配空间，从而实现响应式布局的效果。

以下是一些常用的 Flex 布局知识点总结：

1. display: flex;

   设置容器为 Flex 布局。

   .container {
     display: flex;
   }
   1
   2
   3

2. flex-direction:

   设置 Flex 布局的方向，可以是 row、row-reverse、column、column-reverse。

   .container {
     flex-direction: row;
   }
   1
   2
   3

3. justify-content:

   设置 Flex 容器中弹性项目在主轴上的对齐方式，可以是 flex-start、flex-end、center、space-between、space-around。

   .container {
     justify-content: center;
   }
   1
   2
   3

4. align-items:

   设置 Flex 容器中弹性项目在交叉轴上的对齐方式，可以是 flex-start、flex-end、center、baseline、stretch。

   .container {
     align-items: center;
   }
   1
   2
   3

5. flex-wrap:

   设置弹性项目是否换行，可以是 nowrap、wrap、wrap-reverse。

   .container {
     flex-wrap: wrap;
   }
   1
   2
   3

6. flex-flow:

   flex-direction 和 flex-wrap 的简写形式。

   .container {
     flex-flow: row wrap;
   }
   1
   2
   3

7. align-content:

   设置多行弹性项目在交叉轴上的对齐方式，可以是 flex-start、flex-end、center、space-between、space-around、stretch。

   .container {
     align-content: center;
   }
   1
   2
   3

8. order:

   设置弹性项目的排列顺序，默认值为 0。

   .item {
     order: 1;
   }
   1
   2
   3

9. flex-grow:

   设置弹性项目的增长因子，用于决定弹性项目的放大比例，默认值为 0。

   .item {
     flex-grow: 1;
   }
   1
   2
   3

10. flex-shrink:

    设置弹性项目的收缩因子，用于决定弹性项目的缩小比例，默认值为 1。

    .item {
      flex-shrink: 0;
    }
    1
    2
    3

11. flex-basis:

    设置弹性项目在主轴上的初始大小，默认值为 auto。

    .item {
      flex-basis: 200px;
    }
    1
    2
    3

12. flex:

    flex-grow、flex-shrink 和 flex-basis 的简写

13. align-self:

    设置单个弹性项目在交叉轴上的对齐方式，会覆盖 align-items 属性。

    .item {
      align-self: flex-end;
    }
    1
    2
    3

14. gap:

    设置弹性项目之间的间隔，类似于 margin 属性。

    .container {
      gap: 20px;
    }
    1
    2
    3

15. justify-items:

    设置弹性项目在单元格中的对齐方式，类似于 align-items 属性。

    .container {
      justify-items: center;
    }
    1
    2
    3

16. justify-self:

    设置单个弹性项目在单元格中的对齐方式，类似于 align-self 属性。

    .item {
      justify-self: end;
    }
    1
    2
    3

17. flex-container 和 flex-item

    Flex 容器和弹性项目分别被称为 Flex 容器和 Flex 项目。

    .flex-container {
      display: flex;
    }
    
    .flex-item {
      flex: 1;
    }
    1
    2
    3
    4
    5
    6
    7

18. z-index

    可以用于控制弹性项目在 Flex 容器中的层叠顺序。

    .item {
      z-index: 1;
    }
    1
    2
    3

19. min-width 和 max-width

    可以用于限制弹性项目的最小宽度和最大宽度。

    .item {
      min-width: 100px;
      max-width: 500px;
    }
    1
    2
    3
    4

20. min-height 和 max-height

    可以用于限制弹性项目的最小高度和最大高度。

    .item {
      min-height
    1
    2

21. min-height 和 max-height

    可以用于限制弹性项目的最小高度和最大高度。

    .item {
      min-height: 50px;
      max-height: 200px;
    }
    1
    2
    3
    4

22. margin 和 padding

    可以用于控制弹性项目的外边距和内边距。

    .item {
      margin: 10px;
      padding: 20px;
    }
    1
    2
    3
    4

23. background 和 border

    可以用于设置弹性项目的背景色和边框样式。

    .item {
      background-color: #eee;
      border: 1px solid #ccc;
    }
    1
    2
    3
    4

以上是常用的 Flex 布局知识点总结，掌握了这些知识点可以帮助我们更好地使用 Flex 布局实现页面布局效果。

二、Grid布局

阮一峰的布局：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
栅格布局是一种通过将网页分成多个列和行来实现响应式布局的技术。使用栅格布局时，可以将网页中的元素放入一个网格系统中，然后根据需要对网格进行调整，从而实现响应式布局的效果。

三、css响应式布局

响应式布局是一种针对不同设备屏幕大小和分辨率进行设计的网页布局技术。通过使用响应式布局技术，可以使网页在不同的设备上都能够呈现出最佳的用户体验。

下面是实现响应式布局的一些常用技术：

• 媒体查询

  媒体查询是一种 CSS3 技术，可以根据不同的设备屏幕大小和分辨率来应用不同的 CSS 样式。使用媒体查询时，可以根据需要设置不同的断点，比如在 768px、992px、1200px 等屏幕宽度处设置断点，来应用不同的样式。

  @media not|only mediatype and (expressions) {
    /* CSS代码 */
  }
  1
  2
  3

  mediatype是媒体类型，

  • ​ all 所以媒体
  • ​ screen, 设备（带屏幕）
  • ​ print ，打印机和打印机预览
  • ​ speech ，应用屏幕阅读等发声设备

  expressions是媒体特性，

  • width 、max-width、min-width
  • height

  not和only是可选的逻辑运算符，用于指定是否匹配或仅匹配某种媒体类型