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

Posted 2023-03-05

技术标签:

【中文标题】垂直居中并左对齐一列弹性项目【英文标题】：Vertically center and left-align a column of flex items 【发布时间】：2016-01-27 02:06:49 【问题描述】：

要求

android

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

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

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

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 demo

【问题讨论】：

【参考方案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>

在此处了解有关沿主轴的 flex 对齐的更多信息：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

在此处了解有关沿交叉轴的 flex 对齐的更多信息：

How does flex-wrap work with align-self, align-items and align-content?

【讨论】：

诀窍是设置高度，让浏览器知道定位项目的确切点。【参考方案2】：

我认为如果您将列 div 垂直放在包装器 div 的中心（我们称它为您的行 div）：