【css】水平，垂直，居中 display:flex，flex-direction，justify-content，align-items,display:grid,grid-template-col

一、状态 ：display: flex; + 主轴自动水平

• display: flex; 是 CSS Flexbox 布局模块的一个核心属性，用于将一个容器定义为 flex 容器，使其子元素能够使用 Flexbox 布局进行排列。Flexbox 是一种一维布局方法，主要用于页面布局中的行布局（水平布局）和列布局（垂直布局）。
• 
  
  
  
  

二、flex-direction （垂直）: 改变主轴方向

• 父级：俩都得写
  display: flex;
flex-direction: column;

三、justify-content :子元素 水平 对齐位置

1. center : 居中

• justify-content: center;
  如果 justify-content 设置为 center，那么所有的子元素将在容器的主轴（默认是水平方向）上 居中对齐。
• 
• 

2.space-between :平均分布 两端的子元素贴紧两端

• 

• 

• 

• 

• 

• 在实际应用中，你可能需要根据布局的具体需求来调整 justify-content 的值，它还有其他几个选项，如 flex-start、flex-end、space-between、space-around 等，以实现不同的对齐效果。

四、align-items：子元素在 交叉轴（cross axis）上的位置

• 
• 
• 
• align-items 属性还有其他几个可选值，如 flex-start、flex-end、stretch、baseline 等，每个值都有其特定的对齐效果。根据布局需求选择合适的值。

---

一、display: grid : 网格容器

• 
• 
• 
  
• 
• 
  二、grid-template-columns
• grid-template-columns: repeat(3, 1fr); 是一个 CSS Grid 属性，用于定义网格容器的列宽。在这个例子中，网格被定义为有三列，每列的宽度都相等，并且占据网格容器宽度的三分之一（1fr 表示一个分数单位）。
•