【css】水平对齐方式（justify、text-align、display: flex；）

一、justify

1. 完整的属性名是 justify-content
2. justify-content 用于定义位于同一行的项目在主轴（通常是水平方向）上的对齐方式。

• center ：居中
• start : 起始位置对齐（左对齐）
• end : 结束位置对齐（右对齐）
• space-between : 元素之间会平均分布，第一个元素靠左，最后一个元素靠右，中间元素平分间距。
• space-around : 元素之间会有相同的间距，并且第一个元素和最后一个元素与两侧的间距是中间元素间距的一半。

二、text-align

三、display: flex;

1. text-align 要配套display: flex;吗 display: flex;可以不写吗

• text-align 属性用于设置块级元素或表格单元内的文本或行内元素的水平对齐方式，通常与 display: flex 无关。因此，你可以在不使用 display: flex 的情况下使用 text-align 来对齐文本内容。

CODE:

<div style="text-align: center;">
  <p>这是居中的文本。</p>
</div>

2. display: flex;和justify配套吗 justify可以不写吗

• display: flex; 和 justify-content 确实通常是配套使用的，但并不是强制必须要一起使用。
• display: flex; 作用：
  display: flex; 用于将元素设为弹性容器，使其子元素成为弹性项目，可以在主轴上灵活排列。
• 不写 justify-content 的效果：
  虽然 justify-content 通常与 display: flex; 一起使用，但你可以选择不写 justify-content。如果不写，justify-content 默认会是flex-start，即子元素从主轴的起始位置排列。