css - 使用 flex-box 时如何水平拉伸元素
问题描述
我正在尝试水平拉伸内部对象,以便它们填充容器的宽度。
这是我的代码:
<!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 元素的高度被拉伸:
align-items: stretch;
如何也拉伸这些元素的宽度?
解决方案
只需添加flex:1
到弹性项目:
.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/
推荐阅读
- php - 用php隐藏一个按钮
- javascript - Javascript 日期时间覆盖
- linux - 如果在 While 循环中如何正确设置
- python - 必须定义一个函数,可以在 python 中找到多个列表列表的平均值
- sql - 如何在 SQLParameters 中使用 IN 子句?
- vmware - 在主动/主动边缘路由方案中使用 NSX-T 网关防火墙保护物理服务器
- amazon-web-services - SAM 模板 - 创建后如何更改 API 名称?
- microsoft-graph-api - 如何使用具有应用程序权限的 Micosoft Graph v1.0 正确创建在线会议?我收到了禁止回复
- c - 带指针的无效函数
- amazon-web-services - 如何在堆栈中存储和重用来自 CloudFormation 自定义资源 Lambda 函数的响应数据?