中、右对齐挠性盒元件

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 '. b c'grid-template-columns: 1fr 1fr 1fr