弹性项目 CSS 中文本的 Alignment

Question

Following is the code, which is working fine in most cases except when text is too long then the text adjusts itself from going up. Let me know how can i align the item to center even when the text is long as per the screenshot.

Code -

 * { 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

Is this what you want?

I've added .col {text-align: center;} for clarification.

 * { 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

I figured it out on my own. My mistake was I am using align-items: center; instead it should be align-items: flex-start; .

Working example -

 * { 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>