好久未写博客,又回来了,还是得实时督促自己
最近遇到了一个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布局模式不太理解,以后有机会看下;