css篇-子元素高度撑满父级（父级未设置高度），同时子元素内文字垂直居中

好久未写博客，又回来了，还是得实时督促自己

最近遇到了一个css问题；问题如下

父元素不设置高度，子元素全为（display:inline-block），左侧内容撑开高,想要右侧子元素高度为100%（即与左侧子元素高一致），使用height:100%,并不好使，始终是内容撑开的高，而非父级高，

{{item}}

右侧子元素

{{item}}

//后为了垂直居中，修改成这样

一、子元素高度与父级一致解决方法

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布局模式不太理解，以后有机会看下；