中、右对齐挠性盒元件

Question

中、右对齐挠性盒元件

我想要A B和C中间对齐。

我怎么才能D完全向右走？

之前：

enter image description here

之后：

enter image description here

做这件事的最佳做法是什么？

ul {

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

li {

  display: flex;

  margin: 1px;

  padding: 5px;

  background: #aaa;

}

li:last-child {

  background: #ddd;

  /* magic to throw to the right*/

}

<ul>

  <li>A</li>

  <li>B</li>

  <li>C</li>

  <li>D</li>

</ul>

https://jsfiddle.net/z44p7bsx/

Answer 1

可以稍微更改接受的答案，因为您可以使用网格模板区域，并且可以不使用假元素。grid-template-areas&nbsp;'.&nbsp;b&nbsp;c'grid-template-columns:&nbsp;1fr&nbsp;1fr&nbsp;1fr