拉伸弯曲第一行项目，而不是最后一项

Question

我使用flexbox在包装器的中心显示年份项目。使用.inn-wrap>* { flex: 1 1 auto; }它会扩展包装器中的最后两个项目，如果可以对前两个项目而不是最后两个项目进行扩展，那么它是可能的。

今年的名单根据当年的博客动态增长

＆＃13;

＆＃13;

.wrap{ width:300px;margin:30px auto; background-color:#000; padding:15px; margin-bottom:20px;}
.inn-wrap{width:100%; 
display: flex;
flex-wrap:wrap;
justify-content: center;
text-align:center;
}
/*for last row: column items */
.inn-wrap>* { flex: 1 1 auto; }
.year{display:inline-block; margin:5px 5px; padding:5px 15px; background-color:#fff;
            text-decoration:none; color:#000;font-size:16px; font-weight:600;
}

＆＃13;

<div  class="wrap">
   <div class="inn-wrap">
      <a href="/articles/2018" class="year">2018</a>
      <a href="/articles/2017" class="year">2017</a>
      <a href="/articles/2016" class="year">2016</a>
      <a href="/articles/2015" class="year">2015</a>
      <a href="/articles/2014" class="year">2014</a>
      <a href="/articles/2013" class="year">2013</a>
      <a href="/articles/2012" class="year">2012</a>
      <a href="/articles/2011" class="year">2011</a>
      <a href="/articles/2011" class="year">2010</a>
      <a href="/articles/2011" class="year">2009</a>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

CodePen链接

响应宽度的另一个例子

＆＃13;

＆＃13;

.wrap{ width:40%;margin:30px auto; background-color:#000; padding:15px; margin-bottom:20px;}
.inn-wrap{width:100%; 
display: flex;
flex-wrap:wrap;
justify-content: center;
text-align:center;
}
/*for last row: column items */
.inn-wrap>* { flex: 1 1 auto; }

.year{display:inline-block; margin:5px 5px; padding:5px 15px; background-color:#fff;
            text-decoration:none; color:#000;font-size:16px; font-weight:600;
}

＆＃13;

<div  class="wrap">
   <div class="inn-wrap">
      <a href="/articles/2018" class="year">2018</a>
      <a href="/articles/2017" class="year">2017</a>
      <a href="/articles/2016" class="year">2016</a>
      <a href="/articles/2015" class="year">2015</a>
      <a href="/articles/2014" class="year">2014</a>
      <a href="/articles/2013" class="year">2013</a>
      <a href="/articles/2012" class="year">2012</a>
      <a href="/articles/2011" class="year">2011</a>
      <a href="/articles/2011" class="year">2010</a>
      <a href="/articles/2011" class="year">2009</a>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

EXAMPLE

Answer 1

1. 重新排序年份列表（通常并不困难）
2. 将.inn-wrap旋转至180deg
3. 将.inn-wrap的每个孩子转为180deg

我添加了可调整大小的容器以检查响应性。

#resize {width:340px; padding:20px; border:solid 1px; resize:both; overflow:auto}


.wrap {
  min-width: 100px;
  margin: 30px auto;
  background-color: #000;
  padding: 15px;
  margin-bottom: 20px;
}

.inn-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  transform:rotate(180deg);
}

.inn-wrap > a {
  flex: 1 1 auto;
  text-align: center;
  transform:rotate(180deg);
}

.year {
  display: inline-block;
  margin: 5px 5px;
  padding: 5px 15px;
  background-color: #fff;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

<div id="resize">Resize me!

<div class="wrap">
  <div class="inn-wrap">
    <a href="/articles/2011" class="year">2009</a>
    <a href="/articles/2011" class="year">2010</a>
    <a href="/articles/2011" class="year">2011</a>
    <a href="/articles/2012" class="year">2012</a>
    <a href="/articles/2013" class="year">2013</a>
    <a href="/articles/2014" class="year">2014</a>
    <a href="/articles/2015" class="year">2015</a>
    <a href="/articles/2016" class="year">2016</a>
    <a href="/articles/2017" class="year">2017</a>
    <a href="/articles/2018" class="year">2018</a>
  </div>
</div>

</div>

顺便说一下，如果你不在其他任何地方使用class="year"，你可能会摆脱它。而包装纸对我来说也是过分的。

更新

上面的解决方案有点hacky，因为我使用transform伪造元素的外观而不是真正改变它们的flex属性。

更正确和'公平'的解决方案是：

1. 重新排列年份列表
2. 撤消flex-flow
的.inn-wrap

#resize {width:340px; padding:20px; border:solid 1px; resize:both; overflow:auto}


.wrap {
  min-width: 100px;
  margin: 30px auto;
  background-color: #000;
  padding: 15px;
  margin-bottom: 20px;
}

.inn-wrap {
  width: 100%;
  display: flex;
  flex-flow:row-reverse wrap-reverse;
}

.inn-wrap > a {
  flex: 1 1 auto;
  text-align: center;
}

.year {
  display: inline-block;
  margin: 5px 5px;
  padding: 5px 15px;
  background-color: #fff;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

<div id="resize">Resize me!

<div class="wrap">
  <div class="inn-wrap">
    <a href="/articles/2011" class="year">2009</a>
    <a href="/articles/2011" class="year">2010</a>
    <a href="/articles/2011" class="year">2011</a>
    <a href="/articles/2012" class="year">2012</a>
    <a href="/articles/2013" class="year">2013</a>
    <a href="/articles/2014" class="year">2014</a>
    <a href="/articles/2015" class="year">2015</a>
    <a href="/articles/2016" class="year">2016</a>
    <a href="/articles/2017" class="year">2017</a>
    <a href="/articles/2018" class="year">2018</a>
  </div>
</div>

</div>