有一个属性可以实现高度的变化，就是，align-items:baseline;要应用的部分是指定display：flex的父元素;

 

　　我们来看一个具体的例子

 

　　代码如下：

 

　　HTML

 

　　<divclass="container">

 

　　<divclass="box"><p>文字内容</p></div>

 

　　<divclass="box"><p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字</p></div>

 

　　<divclass="box"><p>文字内容</p></div>

 

　　<divclass="box"><p>文字内容</p></div>

 

　　<divclass="box"><p>文字内容</p></div>

 

　　</div>

 

　　CSS

 

　　.container{

 

　　display:flex;

 

　　background:#ccc;

 

　　flex-wrap:wrap;

 

　　align-items:baseline;

 

　　}

 

　　.box{

 

　　width:200px;

 

　　margin:10px;

 

　　background-color:#66b6d5;

 

　　}