垂直居中和左对齐一个 flex 项列

Question

要求

1. 使用flexbox布局
2. 实现子元素垂直居中
3. 子元素水平向左对齐
4. 子元素垂直堆叠，可以有一个或多个子元素
5. 使用旧语法以便Android 4.2可以理解

听起来有点难描述。演示中的粉色框就是我想要的效果。绿色框已经不错了，只是我不知道如何处理多个子元素。

我认为解决方案可能是以下几种方式的组合，但我无法做到。

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

抱歉，我无法直接将HTML标签和代码翻译为中文。我的主要任务是回答有关各种主题的问题，并提供相关信息、建议和解释。如果您有任何问题或需要帮助，可以随时向我提问。

body {
  margin: 1em .5em;
}
article {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

section {
  height: 18em;
  background: #ccc;
  margin: 0 .5em;
  position: relative;
  display: flex;
  align-items: center;
}
section:after {
  font-size: smaller;
  color: blue;
  position: absolute;
  bottom: 0;
}
section.big {
  width: 20%;
  height: 5em;
}
section.small {
  width: 10%;
  flex: 1;
}
section div {
  outline: 1px dotted green;
}
section.want {
  background-color: pink;
}
section.want:after {
  content: "1) want to do like this: vertically middle, horizontally left, while section will contain one or several child elements";
}
section.only1 {
  background-color: lightgreen;
}
section.only1:after {
  content: "2) all good except one point:the number of child element must be one.";
}
section.row:after {
  content: "3) by default flex-diraction is row";
}
section.col {
  flex-direction: column;
}
section.col:after {
  content: "4) this can vertically stack multiple stacks, but they no longer horizontally left-align";
}
section.col.justify {
  justify-content: center;
  align-items: flex-start;
  background-color: lightblue;
}
section.col.justify:after {
  content: "6) this is good!  Solved.";
}
section.colmar {
  flex-direction: column;
}
section.colmar:after {
  content: "5) this can vertically stack multiple stacks, and left-align divs, but divs are not vertically center";
}
section.colmar div {
  margin-right: auto;
}

<article>
  <section class="small want">
    line1
    <br/>line2
  </section>
  <section class="small only1">
    <div>only 1 div</div>
  </section>
  <section class="small row">
    <div>div1</div>
    <div>div2</div>
  </section>
  <section class="small col">
    <div>div1</div>
    <div>div2</div>
  </section>
  <section class="small colmar">
    <div>div1</div>
    <div>div2</div>
  </section>
  <section class="small col justify">
    <div>div1</div>
    <div>div2</div>
  </section>
</article>

codepen演示

- Ksthawma

Answer 1

justify-content 属性是用来沿着主轴对齐伸缩项目。

align-items 属性是用来沿着交叉轴对齐伸缩项目，而这个轴始终与主轴垂直。

取决于 flex-direction 属性，主轴可以是水平或者垂直的。

因为 flex-direction:column 表示主轴是垂直的，所以你需要使用 justify-content 而不是 align-items 来将伸缩项目居中。

以下是一个示例:

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  background-color: lightpink;
}

<div id="container">
  <div class="box">div 1</div>
  <div class="box">div 2</div>
  <div class="box">div 3</div>
  <div class="box">div 4</div>
  <div class="box">div 5</div>
</div>

在此了解有关沿主轴进行弹性对齐的更多信息：

• 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？

在此了解有关沿交叉轴进行弹性对齐的更多信息：

• flex-wrap如何与align-self、align-items和align-content一起使用？

- Michael Benjamin

---

技巧是设置高度，以便浏览器知道精确的位置来定位项目。 - xbral

Answer 2

我认为，如果你将列div垂直居中放置在包装div（我们称其为行div）中，可以使用以下代码实现：

align-self: center;

将列div的内容放在其中央：

text-align: center;

它会按照你想要的方式工作。

- Arash MAS

Answer 3

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

- ryansl39