主页 / 问题 / 1174406
Accepted
Tempest
Asked:2020-09-05 09:49:12 +0000 UTC2020-09-05 09:49:12 +0000 UTC

如何在父级的角落网格放置div？

  • 772

我有 4 个方块，想将每个方块放在 flex 容器的每个角落。我决定通过justify-self属性来做到这一点，当我为它设置div.one参数justify-self: start;时，没有任何反应。

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  font-size: 30px;
  color: #fff;
  outline: 1px solid red;
  height: 800px;
}

.one {
  width: 200px;
  height: 200px;
  background-color: red;
  align-self: flex-start;
  justify-self: start;
}

.two {
  width: 200px;
  height: 200px;
  background-color: blue;
  align-self: flex-end;
}

.three {
  width: 200px;
  height: 200px;
  background-color: black;
  align-self: flex-start;
}

.four {
  width: 200px;
  height: 200px;
  background-color: green;
  align-self: flex-end;
}
<div class="flex">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

是否可以使用网格将所有<div>-s 放置在角落？

（Codepen 上的代码）

html

1 个回答

  1. Best Answer

    对于初学者，您在文本中混淆了 Flexbox 和网格布局的概念。但是由于您的示例中有 flexbox，我将使用它给出答案。

    .flex {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  color: #fff;
  outline: 1px solid red;
  height: 500px;
  align-content: space-between;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex::before {
  width: 100%;
  content: "";
  order: 2;
}

.flex>div {
  width: 100px;
  height: 100px;
}

.one {
  background: red;
  order: 1;
}

.two {
  background: blue;
  order: 1;
}

.three {
  background: black;
  order: 2;
}

.four {
  background: green;
  order: 2;
}
    <div class="flex">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

    这个解决方案只有几个缺点。首先：伪元素用于创建传输，这在一定程度上是一种黑客攻击，尽管并不重要。其次，没有特别需要使用 flexbox 来完成这项任务。我认为在网格上或通过相对于父块的绝对定位来实现这种行为会更容易。当然，每个解决方案都有自己的细微差别，这完全取决于最终要求。

    • 4

相关问题