Html Flexbox对齐内容并对齐不起作用的内容

我设置了特定的宽度，并且在我的flex项目上没有

margin:auto

，但由于某些原因，这些属性无法按预期工作

我只需要流浆箱和列表类之间的间距

现在，在我的com上，流浆箱居中，但在代码段上，流浆箱不居中，我不知道为什么，即使

justify content

设置为居中

但即使在我的电脑上，对齐项目也不能正常工作

我的意思是我知道它没有效果，但那只是如果只有一个项目

我也评论了一些常见的嫌疑犯，但这不起作用

最后，

right

实际上是更大的容器div的一部分，但这应该是无关的。如果你为这个片段做一整页，你就会明白我在说什么

。对{
显示器：flex；
位置：相对位置；
柔性流：行换行；
对齐项目：项目之间的间距；
证明内容：中心；
//文本对齐：居中；
顺序：3；
//背景：黄色；
弹性：150%；
身高：100%；
}
分区列表{
显示器：flex；
柔性流：行换行；
宽度：70%；
证明内容：中心；
线高：300%；
边框：1px纯红；
}
.对，流浆箱{
边框底部：1px纯色橙色；
宽度：70%；
高度：自动；
}
.对，名单{
//文本对齐：居中；
高度：自动；
}
.list ul{
列表样式：无；
填充：0；
}
.列表a{
文字装饰：无；
颜色：继承；
}

访问我们

实际上，

justify content

和

align items

都可以正常工作

由于其他原因，你没有得到你想要的结果

---

首先，请记住a的范围是父子关系

这意味着子代之外的子代不是flex项，也不接受flex属性

因此，每当您想要将flex属性应用于元素时，请确保父元素是flex容器（

display:flex

或

display:inline flex

）

您的

.right

柔性容器带有

内容对齐：中心
实际上已居中
。流浆箱
。在
.right
和
.headbox
周围添加边框以清楚地看到这一点

但是，如果您想使用flex属性将
置于中心位置，则还可以将
.headbox
设为flex容器：

.headbox {
    display: flex;
    justify-content: center;
    align-items: center;
}


其次，布局没有定义的高度。它的默认值为
高度：auto
（内容的高度）。因此，
align items
没有空间移动东西

将此添加到您的代码中：

html, body { height: 100%; }


html，正文{高度：100%；}/*新建*/
.对{
显示器：flex；
位置：相对位置；
柔性流：行换行；
对齐项目：项目之间的间距；
证明内容：中心；
顺序：3；
弹性：150%；
身高：100%；
}
分区列表{
显示器：flex；
柔性流：行换行；
宽度：70%；
证明内容：中心；
线高：300%；
边框：1px纯红；
}
.对，流浆箱{
边框底部：1px纯色橙色；
宽度：70%；
高度：自动；
显示：flex；/*新*/
对齐内容：中心；/*新建*/
对齐项目：居中；/*新建*/
}
.对，名单{
高度：自动；
}
.list ul{
列表样式：无；
填充：0；
}
.列表a{
文字装饰：无；
颜色：继承；
}

访问我们