flex弹性盒子布局:

弹性盒模型的作用：就是控制子元素的布局

形成弹性盒：在父元素上写display：flex

特点:

1. 当父元素变成弹性盒子之后，子元素默认横向显示 （沿着主轴排列，默认主轴x轴，另外一个叫做侧轴）
2. 当父元素变成弹性盒子之后。子元素都能直接设置宽高
3. margin：auto是生效的
4. 如果子元素总宽度大于父元素，那么是不会超出父盒子，也不会自动换行，而是会被挤压
5. 可以左右布局，圣杯布局

设置主轴方向：

flex-direction: row | row-reverse | column | column-reverse;

row：横向、x轴 (常用)

column：纵向、y轴（常用）

设置子元素在主轴的对齐方式：

1. justify-content: flex-start | flex-end | center | space-between | space-around;
   1. flex-start：主轴的开始位置对齐，没有间距
   2. flex-end：主轴的结束位置对齐，没有间距
   3. center：居中, 主轴的中间位置对齐，没有间距
   4. space-between：主轴上面两端对齐，元素与元素之间的距离自动分配（常用）
   5. space-around:自动分配距离、左右间距都一样。(常用)
      1. 主轴上面的间距环绕，元素与元素之间的距离是靠边元素与父元素之间的2倍
   6. space-evenly:自动分配剩余空间，所有的距离都一样

设置子元素在侧轴（交叉轴）的对齐方式：

1. align-items: flex-start | flex-end | center | baseline | stretch（默认值）;
   1. flex-start：侧轴的开始位置
   2. flex-end：侧轴的结束位置
   3. center：侧轴的中间位置
   4. baseline：和flex-start等效
   5. stretch拉伸，要想让拉伸起作用，前提是子元素不能定宽度或者高度。

设置子元素是否换行：

1. 1. flex-wrap: nowrap | wrap | wrap-reverse;
   2. nowrap：不换行
   3. wrap：换行
   4. wrap-reverse：反向换行

换行之后，行间距自动分配；行间距比较大

多行对齐方式（对于单行子元素，该属性不起作用。）：

1. 1. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   2. align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用
   3. flex-start：侧轴开始位置对其，没有行间距
   4. flex-end：侧轴结束位置对其，没有行间距
   5. center：侧轴中间位置对其，没有行间距
   6. space-between：2端对齐，中间自动分配
   7. space-around：自动分配间距

设置在子元素上的属性:

1. align-self：控制自己在侧轴的对齐方式
   1. auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"
   2. stretch=======元素被拉伸以适应容器。（如果没有宽度、高度）
   3. center========侧轴的居中位置
   4. flex-start======侧轴的开始位置
   5. flex-end=======侧轴的结束位置
   6. baseline==========侧轴的基线位置，实现效果与开始位置一样
2. order:排序，控制子元素的排列顺序，数字越大越往后排，默认0，支持负数
3. flex：设置子元素如何分配空间
   1. flex：1把剩余空间全部分配给当前元素
   2. 如果每一个子元素都有flex：1，那就是平均分配
   3. 如果有3个子元素：分别设置flex：1、flex：2、flex：3。那么就是把整个盒子分成了6份，第一个占1份，第二个占2份，第三个占3份。
4. flex-shrink：======元素是否挤压，一般用于制作移动端的横向滚动。
   1. 0=====不挤压
   2. 1=====挤压（默认值）

gap属性:

1. CSS Grid 布局：这是gap最经典的用法，用来控制网格轨道（行与行、列与列）之间的间距。

   css

   .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; /* 行间距20px，列间距10px */ }

2. Flexbox 布局：在现代浏览器中，gap已经完全支持 Flexbox，用来控制 flex 项目在主轴和交叉轴上的间距。

   css

   .flex-container { display: flex; flex-wrap: wrap; gap: 16px; /* 项目之间水平和垂直间距都是16px */ }

3. 多列布局：在column-count或column-width布局中，gap（或column-gap）控制列与列之间的间距。

   css

   .newspaper { column-count: 3; gap: 40px; /* 列间距为40px */ }