一、justify
- 完整的属性名是
justify-content
justify-content
用于定义位于同一行的项目在主轴(通常是水平方向)上的对齐方式。
center
:居中start
: 起始位置对齐(左对齐)end
: 结束位置对齐(右对齐)space-between
: 元素之间会平均分布,第一个元素靠左,最后一个元素靠右,中间元素平分间距。space-around
: 元素之间会有相同的间距,并且第一个元素和最后一个元素与两侧的间距是中间元素间距的一半。
二、text-align
三、display: flex;
- text-align 要配套display: flex;吗 display: flex;可以不写吗
text-align
属性用于设置块级元素或表格单元内的文本或行内元素的水平对齐方式,通常与display: flex
无关。因此,你可以在不使用display: flex
的情况下使用text-align
来对齐文本内容。
CODE:
<div style="text-align: center;">
<p>这是居中的文本。</p>
</div>
- display: flex;和justify配套吗 justify可以不写吗
display: flex;
和justify-content
确实通常是配套使用的,但并不是强制必须要一起使用。- display: flex; 作用:
display: flex;
用于将元素设为弹性容器,使其子元素成为弹性项目,可以在主轴上灵活排列。 - 不写 justify-content 的效果:
虽然justify-content
通常与display: flex;
一起使用,但你可以选择不写justify-content
。如果不写,justify-content
默认会是flex-start
,即子元素从主轴的起始位置排列。