让一个Flex 盒子的宽度和高度的比值始终保持4比1 请写出 html css 代码示例
时间: 2024-10-09 16:01:05 浏览: 34
为了保持 Flex 容器(通常是一个 `div` 元素设置了 `display: flex;`)的高度和宽度的比值为 4:1,你可以使用 CSS 中的 `flex-grow`, `flex-shrink`, 和 `flex-basis` 属性来设置每个项目的基础大小、放大比例以及缩小比例。这里有一个基本的 HTML 和 CSS 示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
width: 100%; /* 设置容器宽度 */
height: 50%; /* 或者任何其他值,比如 calc(100vh * 0.2) 以适应视窗高度 */
}
.item {
flex: 0 0 auto; /* 使用 flex-basis=auto 保持原始尺寸,flex-grow=0 不会自动增大,flex-shrink=0 不允许缩小 */
background-color: lightgray;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">内容</div>
</div>
</body>
</html>
```
在这个例子中,`.container` 的宽度设为 100%,高度设为容器高度的 50%(可以根据需要调整)。`.item` 的 `flex` 属性设为 `0 0 auto`,这意味着它只会在其初始基础上占据空间,并且不会随容器大小变化而改变宽高比。
阅读全文