主页 / 问题 / 1324959
Accepted
nup
Asked:2022-09-03 18:07:59 +0000 UTC2022-09-03 18:07:59 +0000 UTC

如何根据这种模式在 flex 上定位项目？[关闭]

  • 772

告诉我如何在flex没有额外包装器的情况下根据这种模式定位元素？ 在此处输入图像描述

css

1 个回答

  1. Best Answer

    由于任务条件需要 flex，而不是网格，我使用负缩进复制了图像¯\_ (ツ)_/¯

    .container {
  --rowHeigt:15vw;
  --colWidth:30vw;
  --gap:1vw; 
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap)
}
.item:nth-child(1), 
.item:nth-child(2)  {
 width: calc(var(--colWidth) * 2);
 height: var(--rowHeigt);
}
.item:nth-child(3) {
  width: var(--colWidth);
  margin-top: calc(0px - var(--rowHeigt) - var(--gap));
}

.item {
  background-color: #eee;
  padding:1em;
  box-sizing: border-box;
}
    <div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

    • 3

相关问题