彈性項目 CSS 中文本的 Alignment

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>