Html 垂直居中并左对齐一列弹性项

要求

柔性箱

垂直中间

水平左

垂直堆叠的子元素

子元素的数量可以是一个或多个

使用旧语法，以便Android 4.2能够理解

听起来很难描述。演示中的粉红色框就是我想要的外观。绿色框已经很好了，只是我不知道如何处理多个子元素

我认为解决方案可能是以下几点的结合，但我无法做到

align-items: center;
flex-direction: column;

正文{
边缘：1em.5em；
}
文章{
显示器：flex；
对齐项目：居中；
柔性包装：包装；
}
部分{
高度：18em；
背景：#ccc；
边缘：0.5em；
位置：相对位置；
显示器：flex；
对齐项目：居中；
}
章节：之后{
字体大小：较小；
颜色：蓝色；
位置：绝对位置；
底部：0；
}
第1节大{
宽度：20%；
身高：5公分；
}
第1节小型{
宽度：10%；
弹性：1；
}
分区{
轮廓：1px点绿色；
}
第三节想要什么{
背景颜色：粉红色；
}
第二节：想要什么{
内容：“1）要这样做：垂直居中，水平向左，而节将包含一个或多个子元素”；
}
第1.1节{
背景颜色：浅绿色；
}
第1节：之后{
内容：“2）除了一点外，其他都很好：子元素的数量必须是一。”；
}
第.行：之后{
内容：“3）默认flex diraction为行”；
}
第1.col节{
弯曲方向：立柱；
}
上校：在{
内容：“4）可以垂直堆叠多个堆栈，但它们不再水平左对齐”；
}
第3.1节{
证明内容：中心；
调整项目：灵活启动；
背景颜色：浅蓝色；
}
第节col.justify：之后{
内容：“6）这很好！解决了。”；
}
科马尔{
弯曲方向：立柱；
}
科马尔：之后{
内容：“5）可以垂直堆叠多个堆栈，并左对齐div，但div不垂直居中”；
}
科马尔分区{
右边距：自动；
}

第1行

第2行
只有一个分区
第一组
第二组
第一组
第二组
第一组
第二组
第一组
第二组

沿主轴对齐弹性项目

沿横轴对齐弹性项目，横轴始终垂直于主轴

主轴可以是水平的，也可以是垂直的

由于

flex direction:column

表示主轴是垂直的，因此需要使用

justify content

not

align items

将flex项居中

下面是一个例子：

#容器{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
高度：200px；
背景颜色：浅粉色；
}

第一组
第2组
第3组
第4组
第5组

我认为如果您将列div垂直放置在包装器div的中心（我们称之为您的行div），如下所示：

align-self: center;

并将列DIV的内容放在中间：

text-align: center;

---

它将按照您想要的方式工作。

设置高度为我解决了问题。

诀窍是设置高度，以便知道放置项目的确切位置。