css网格列的反向显示顺序

Question

我有一个网格，其中的链接列表显示在单行中，如工具栏

a | b | c | d | e | f | g

是否可以像使用flexbox那样颠倒此顺序

g | f | e | d | c | b | a

基于特定的屏幕尺寸，或者我应该坚持使用flexbox

https://codepen.io/hanakin/pen/wvKjgpx?editors=1100

.wrap {
  width: 960px;
  margin: 56px auto;
}

.c-bar {
  background-color: #343a40;
  display: grid;
  grid-auto-flow: column;
  width: calc(7 * 56px);
}

.c-action {
  color: #868e96;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 56px;
  width: 56px;
}
.c-action:hover, .c-action:focus {
  background-color: #495057;
  outline: 0;
  color: #008dff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

<div class="wrap">
	<section>
		<h5>Bar grid Tests</h5>
		<div class="c-bar">
			<a class="c-bar-item c-action" href="#">
				A
			</a>
			<a class="c-bar-item c-action" href="#">
				B
			</a>
			<a class="c-bar-item c-action" href="#">
				C
			</a>
			<a class="c-bar-item c-action" href="#">
				D
			</a>
			<a class="c-bar-item c-action" href="#">
				E
			</a>
			<a class="c-bar-item c-action" href="#">
				F
			</a>
			<a class="c-bar-item c-action" href="#">
				G
			</a>
		</div>
	</section>
</div>

Answer 1

也许改变方向：

.wrap {
  margin: 56px auto;
}

.c-bar {
  background-color: #343a40;
  display: grid;
  grid-auto-flow: column;
  width: calc(7 * 56px);
  direction: rtl; /* added*/
}

.c-action {
  color: #868e96;
  display: -webkit-inline-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  width: 56px;
}

.c-action:hover,
.c-action:focus {
  background-color: #495057;
  outline: 0;
  color: #008dff;
  transition: 0.5s;
}

<div class="wrap">
  <section>
    <h5>Bar grid Tests</h5>
    <div class="c-bar">
      <a class="c-bar-item c-action" href="#">
				A
			</a>
      <a class="c-bar-item c-action" href="#">
				B
			</a>
      <a class="c-bar-item c-action" href="#">
				C
			</a>
      <a class="c-bar-item c-action" href="#">
				D
			</a>
      <a class="c-bar-item c-action" href="#">
				E
			</a>
      <a class="c-bar-item c-action" href="#">
				F
			</a>
      <a class="c-bar-item c-action" href="#">
				G
			</a>
    </div>
  </section>
</div>

Answer 2

是，肯定可以使用flexbox。我知道，如果您使用flex执行以下操作，则它应该可以工作：

.example {

    display: flex;
    flex-direction: row-reverse | column-reverse;   /* Whichever one you want... */
}

如果在flex-direction之后放反，则内容将与正常/当前设置相反。希望这行得通！