拉伸显示flex或表格内部div沿着父级与居中文本
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拉伸显示flex或表格内部div沿着父级与居中文本相关的知识，希望对你有一定的参考价值。
我想创建一个具有固定html结构的响应式页面，以便我可以调整css。我想创建具有垂直和水平居中文本的行。 div应完全延伸到父div。
我的HTML ...
<body>
<div class="parent">
<div class="d1">
one
</div>
<div class="d2">
two
</div>
<div class="d3">
three
</div>
</div>
</body>
我的CSS ......
body {
background-color: lightyellow;
height: 100%;
width: 100%;
margin: 0px;
}
.parent {
background-color: lightblue;
height: 100%;
}
.d1, .d2, .d3 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100px;
}
.d2 {
background-color: lightgreen;
}
但是在这里我将d1，d2和d3设置为100px的高度而不是父div的100％。示例：https://jsfiddle.net/bLf2sxq0/
我的第二个想法是使用display：table作为父项，这会导致子项的表行，但最后我会遇到相同的拉伸问题，而且文本不是垂直居中的。这里的css会是这样的......
body {
background-color: lightyellow;
height: 100%;
width: 100%;
margin: 0px;
}
.parent {
width: 100%;
height: 100%;
display: table;
background-color: lightblue;
}
.d1, .d2, .d3 {
text-align: center;
height: 100px;
}
.d2 {
background-color: lightgreen;
}
示例：https://jsfiddle.net/qmbzkwr2/
有没有办法沿着父项垂直拉伸div并保持文本在div中垂直和水平居中？所以我不会有宽度100px，但像calc（100％/ 3）或任何其他解决方案这样做？或者也许通过使用flex grow选项？最简单的方法就是这样:)
谢谢你的帮助！
答案
你走在正确的轨道上。使用flexbox可垂直均匀地拉伸和填充项目。请记住将父容器（例如body，html）设置为height: 100%。
从这里开始，如果你想控制某些项目，可以在任何单独的项目上使用flex，比如类.d2上的flex: 1 1 300px。
body, html {
height: 100%;
}
.parent {
background-color: lightblue;
height: 100%;
display: flex;
flex-direction: column;
}
.d1, .d2, .d3 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.d2 {
background-color: lightgreen;
} <div class="parent">
<div class="d1">
<div class="d11">
one
</div>
</div>
<div class="d2">
two
</div>
<div class="d3">
three
</div>
</div>以上是关于拉伸显示flex或表格内部div沿着父级与居中文本的主要内容，如果未能解决你的问题，请参考以下文章