好久未寫博客，又回來了，還是得實時督促自己
最近遇到了一個css問題；問題如下
父元素不設置高度，子元素全爲（display:inline-block），左側內容撐開高,想要右側子元素高度爲100%（即與左側子元素高一致），使用height:100%,並不好使，始終是內容撐開的高，而非父級高，
<li v-for="list in lists”> //父元素
<div>{{list.name}}</div> //左側子元素
<div><p v-for="item in list.child">{{item}}</p></div> 右側子元素
<div><div v-for="item in list.child"><p>{{item}}</p></div> </div> //後爲了垂直居中，修改成這樣
</li>
一、子元素高度與父級一致解決方法
1、給父級元素設置:display：flex;display:-webkit-flex;align-items:stretch;
2、右側子元素:height:inherit;
高度完美撐開，但又衍生另外一個問題，文字無法垂直居中；
思路：
1、無法確定高度，line-height自然無法使用；
2、display:inline-block;vertical-align:middle無法生效(原來是父級元素設置了display:flex），而且無法設置display:table-cell;
3、定位，右側子元素中是個循環，從左往右排，left不一致（而且是動態生成）。無法用定位
二、文字垂直居中解決方法
解決方法，靈機一動，又在外層套了一層div,div從左往右排(position:relative),這樣每個 p標題定位是相對於div就好辦了；
position:absolute;top:50%;transform:translateY(-50%);
完美垂直居中；
三：研究一下從未使用過的align-items屬性；
它爲display:-flex時使用，有一下幾個值
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
stretch 默認值。元素被拉伸以適應容器。
center 元素位於容器的中心。（垂直居中過程試過並不好用）
flex-start 元素位於容器的開頭。
flex-end 元素位於容器的結尾。
baseline 元素位於容器的基線上
initial 設置該屬性爲它的默認值
inherit 從父元素繼承該屬性。
其實flex佈局模式不太理解，以後有機會看下；