flex item CSS中文本的对齐方式

Question

以下是代码，它在大多数情况下都可以正常工作，除非文本太长，然后文本会自行调整以防止上升。让我知道如何将项目对齐到中心，即使文本根据屏幕截图很长。

代码-

* {
  box-sizing: border-box;
}

.container {
  background: #CECCEC;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1;
  background: #b2afe0;
  margin-bottom: 20px;
  padding: 10px;
  box-shadow: 0 0 0 4px #b2afe0;
}

.row:hover {
  transform: translate3d(0, -4px, 1px);
  transition-duration: .5s;
}

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

.row:last-child {
  margin-bottom: 0;
}

<div class="container">
  <div class="row">
    <div class="col">This is Column 11</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 13</div>
    <div class="col">This is Column 14</div>
    <div class="col">This is Column 15</div>
  </div>
  <div class="row">
    <div class="col">This is Column 21</div>
    <div class="col">This is Column 22</div>
    <div class="col">This is Column 23</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 25</div>
  </div>
  <div class="row">
    <div class="col">This is Column 31</div>
    <div class="col">This is Column 32</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 34</div>
    <div class="col">This is Column 35</div>
  </div>
</div>

Answer 1

这是你想要的吗？

我已添加 .col {text-align: center;} 以进行澄清。

* { box-sizing: border-box; }
.container { background: #CECCEC; padding: 20px; display: flex; flex-direction: column; }
.row { display: flex; flex: 1; background: #b2afe0; margin-bottom: 20px; padding: 10px; box-shadow: 0 0 0 4px #b2afe0; }
.row:hover { transform: translate3d(0,-4px,1px); transition-duration: .5s; }
.col { flex: 1; display: flex; justify-content: center; align-items: center; text-align: center }
.row:last-child { margin-bottom: 0; }

<div class="container">
  <div class="row">
    <div class="col">This is Column 11</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 13</div>
    <div class="col">This is Column 14</div>
    <div class="col">This is Column 15</div>
  </div>
  <div class="row">
    <div class="col">This is Column 21</div>
    <div class="col">This is Column 22</div>
    <div class="col">This is Column 23</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 25</div>
  </div>
  <div class="row">
    <div class="col">This is Column 31</div>
    <div class="col">This is Column 32</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 34</div>
    <div class="col">This is Column 35</div>
  </div>
</div>

Answer 2

我自己想出来的。我的错误是我使用的是align-items: center; 而应该是align-items: flex-start;。

工作示例 -

* { box-sizing: border-box; }
.container { background: #CECCEC; padding: 20px; display: flex; flex-direction: column; }
.row { display: flex; flex: 1; background: #b2afe0; margin-bottom: 20px; padding: 10px; box-shadow: 0 0 0 4px #b2afe0; }
.row:hover { transform: translate3d(0,-4px,1px); transition-duration: .5s; }
.col { flex: 1; display: flex; justify-content: center; align-items: flex-start; }
.row:last-child { margin-bottom: 0; }

<div class="container">
  <div class="row">
    <div class="col">This is Column 11</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 13</div>
    <div class="col">This is Column 14</div>
    <div class="col">This is Column 15</div>
  </div>
  <div class="row">
    <div class="col">This is Column 21</div>
    <div class="col">This is Column 22</div>
    <div class="col">This is Column 23</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 25</div>
  </div>
  <div class="row">
    <div class="col">This is Column 31</div>
    <div class="col">This is Column 32</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 34</div>
    <div class="col">This is Column 35</div>
  </div>
</div>