如何使用CSS flexbox垂直对齐和拉伸内容 [英] How to vertically align and stretch content using CSS flexbox

问题描述

使用CSS flexbox，如何在不使用css height 属性的情况下，将所有div的内容垂直居中放置在同一行上，

详情 - http://jsbin.com/ efaCEVa / 1 / edit

解决方案

HTML

 < div class ='outer'> 
< div class ='inner'> A< / div> 
< div class ='inner'> B< / div> 
< div class ='inner'> C< / div> 
< / div> 
  

CSS

  .outer {
 align-items：stretch; 
 display：flex; 
} 
 
 .inner {
 align-items：center; 
 display：flex; 
} 
  

Using CSS flexbox, how can I simultaneously vertically center the content of all divs in a row while keeping the same height on all of them without using the css height attribute?

Details — http://jsbin.com/efaCEVa/1/edit

解决方案

HTML

<div class='outer'>
    <div class='inner'>A</div>
    <div class='inner'>B</div>
    <div class='inner'>C</div>
</div>

CSS

.outer {
    align-items: stretch;
    display: flex;
}

.inner {
    align-items: center;
    display: flex;
}

这篇关于如何使用CSS flexbox垂直对齐和拉伸内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！