justify-self 和 position relative 不能正常工作答案

【问题标题】：justify-self and position relative does not work correctlyjustify-self 和 position relative 不能正常工作
【发布时间】：2019-06-14 20:20:37
【问题描述】：

我有网格框，item2 位于 hi 区域的末尾 b：

.wrapper > div {
    background-color: gray;
    padding: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    grid-template-rows: 150px 150px;
    grid-template-areas: 
      "a b"
      "c d"
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
    justify-self: end;
    position: relative;
    right: -20px;
}
.item3 {
    grid-area: d;
    justify-self: start;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

我需要将item2 从他的位置向右移动一点，所以我使用relative 位置和right: -20px。它在 Chrome 和 Firefox 中完美运行，但在 Safari 版本 11.1.2 (13605.3.8) 中，justify-self: end 似乎不起作用：我的意思是，item2 位于区域 b 的左侧。没有right: -20px 元素item2 在他的区域的右侧。我该如何解决？

Codepen：https://codepen.io/mraimon/pen/ZwzxWe

【问题讨论】：

标签： css safari css-position css-grid

【解决方案1】：

您可以改用负边距：

.wrapper > div {
    background-color: gray;
    padding: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    grid-template-rows: 150px 150px;
    grid-template-areas: 
      "a b"
      "c d"
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
    justify-self: end;
    margin-right: -20px;
}
.item3 {
    grid-area: d;
    justify-self: start;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

或翻译：

.wrapper > div {
    background-color: gray;
    padding: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    grid-template-rows: 150px 150px;
    grid-template-areas: 
      "a b"
      "c d"
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
    justify-self: end;
    transform:translateX(20px);
}
.item3 {
    grid-area: d;
    justify-self: start;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

【讨论】：