Flex布局和Grid布局实现1：2：1的布局

Geoffwo

于 2024-04-24 17:20:31 发布

阅读量128

点赞数 2

分类专栏：布局文章标签：前端 css javascript

本文链接：https://blog.csdn.net/wgx_0504/article/details/138164600

版权

布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Flex布局

.container {
  height: 100vh;
  display: flex; /* 启用Flex布局 */
  flex-direction: row; /* 主轴为水平方向，子项目横向排列 */
}

.item {
  flex-grow: 1; /* 默认情况下，所有子项目的flex-grow值相同 */
}

.item:nth-child(2) {
  flex-grow: 2; /* 第二个子项目的放大比例是其他项目的两倍 */
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Grid布局

.common-grid{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 定义了3列，第一列100px宽，第二列自动填充剩余空间，第三列200px宽 */
  grid-auto-rows: 1fr; /* 设置行高，1fr表示自动填充可用空间 */
  height: 100vh; /* 设置容器高度为视口高度（100%的视口高度） */
}