我试图水平拉伸(stretch)内部对象，以便它们填充容器的宽度。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>
<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
由于属性，内部 div 元素的高度被拉伸(stretch):
align-items: stretch;
如何拉伸(stretch) 宽度这些元素呢？
最佳答案
只需添加 flex:1 flex 元素:
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
flex: 1;
}<h1>The align-items Property</h1>
<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>本指南可能对您很有帮助:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
关于css - 使用 flex-box 时如何水平拉伸(stretch)元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53189666/