是

Question

响应式弹性菜单（代码如下）位于较小的视口上，如下所示：

    |first item| |item| |item| |item| |item| |item| 
                    |last item|

最后一项是中间的整线。是否有可能做到这一点？：

                     |first item| 
    |item| |item| |item| |item| |item| |last item|

寻找共同的解决方案。菜单可以包含任意数量的项目。

＆＃13;

* {
 box-sizing: border-box;
}

html {   
 background:#a0522d;
}
ul {
 border:5px solid #a0522d;
 display:flex;
 flex-wrap:wrap;
 max-width:75em;
 padding:0;
 margin:20px auto;
 justify-content: center;
 align-items: center
}
ul li {
 list-style:none;
 flex-grow:1;
}
ul li a		       {
 line-height:1.5;
 padding:8px 16px;
 display:block;
 text-align:center;
 border-radius:0.313em;
 background:PaleGoldenrod;
 margin:2px;
}
.last, .almostlast {
 max-width:320px;
}

＆＃13;

 <ul>
     <li class="first"><a href="#">first item</a></li>
     <li><a href="#">second item</a></li>
     <li><a href="#">next item</a></li>
     <li><a href="#">item</a></li>
     <li><a href="#">pretty item</a></li>
     <li class="almostlast"><span><a href="#">item</a></span></li>
     <li class="last"><a href="#">last item</a></li>
</ul>

＆＃13;

Answer 1

我不确定使用纯CSS是否可行。但是，您可以使用flex-flow:row-reverse wrap-reverse;来实现此目的，然后反过来制作li项。

＆＃13;

* {
 box-sizing: border-box;
}

html {   
 background:#a0522d;
}
ul {
 border:5px solid #a0522d;
 display:flex;
 flex-flow:row-reverse wrap-reverse;
 max-width:75em;
 padding:0;
 margin:20px auto;
 justify-content: center;
 align-items: center
}
ul li {
 list-style:none;
 flex-grow:1;
}
ul li a		       {
 line-height:1.5;
 padding:8px 16px;
 display:block;
 text-align:center;
 border-radius:0.313em;
 background:PaleGoldenrod;
 margin:2px;
}
.last, .almostlast {
 max-width:320px;
}

＆＃13;

 <ul>
     <li class="last"><a href="#">last item</a></li>
     <li class="almostlast"><span><a href="#">item</a></span></li>
     <li><a href="#">pretty item</a></li>
     <li><a href="#">item</a></li>
     <li><a href="#">next item</a></li>
     <li><a href="#">second item</a></li>
     <li class="first"><a href="#">first item</a></li>
</ul>

＆＃13;

Answer 2

是

将第一个li设置为100％宽度，并将内部链接设置为li的居中位置。

  .first {
    flex: 0 0 100%;
    text-align: center;
    display: flex;
    justify-content: center;
  }

结果：

flickr search explorer

* {
  box-sizing: border-box;
}

html {
  background: #a0522d;
}

ul {
  border: 5px solid #a0522d;
  display: flex;
  flex-wrap: wrap;
  max-width: 75em;
  padding: 0;
  margin: 20px auto;
  justify-content: center;
  align-items: center
}

ul li {
  list-style: none;
  flex-grow: 1;
}

ul li a {
  line-height: 1.5;
  padding: 8px 16px;
  display: block;
  text-align: center;
  border-radius: 0.313em;
  background: PaleGoldenrod;
  margin: 2px;
}

.last,
.almostlast {
  max-width: 320px;
}

.first {
  flex: 0 0 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

<ul>
  <li class="first"><a href="#">first item</a></li>
  <li><a href="#">second item</a></li>
  <li><a href="#">next item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">pretty item</a></li>
  <li class="almostlast"><span><a href="#">item</a></span></li>
  <li class="last"><a href="#">last item</a></li>
</ul>

Answer 3

是的，只需使用order和伪元素，其中伪工作作为分隔符，100％宽并且自己行。

使用order，我们将第一项放在伪。

之前

根据其他答案的评论更新

使用媒体查询，因此只会在较窄的屏幕上进行。

Stack snippet

* {
 box-sizing: border-box;
}

html {   
 background:#a0522d;
}
ul {
 border:5px solid #a0522d;
 display:flex;
 flex-wrap:wrap;
 max-width:75em;
 padding:0;
 margin:20px auto;
 justify-content: center;
 align-items: center
}
ul li {
 list-style:none;
 flex-grow:1;
}

ul li a		       {
 line-height:1.5;
 padding:8px 16px;
 display:block;
 text-align:center;
 border-radius:0.313em;
 background:PaleGoldenrod;
 margin:2px;
}
.last, .almostlast {
 max-width:320px;
}

@media (max-width: 800px) {
  ul::before {
   content: ' ';                         /*  added  */
   width:100%;                           /*  added, fill width and push the rest down  */
}
  .first {
   order: -1;                            /*  added, move before pseudo  */
   flex-grow:0;                          /*  changed, to not fill width  */
  }
}

<ul>
     <li class="first"><a href="#">first item</a></li>
     <li><a href="#">second item</a></li>
     <li><a href="#">next item</a></li>
     <li><a href="#">item</a></li>
     <li><a href="#">pretty item</a></li>
     <li class="almostlast"><span><a href="#">item</a></span></li>
     <li class="last"><a href="#">last item</a></li>
</ul>

通过这个小技巧，其他伪可以做其他很酷的东西

Stack snippet

* {
 box-sizing: border-box;
}

html {   
 background:#a0522d;
}
ul {
 border:5px solid #a0522d;
 display:flex;
 flex-wrap:wrap;
 max-width:75em;
 padding:0;
 margin:20px auto;
 justify-content: center;
 align-items: center
}
ul li {
 list-style:none;
 flex-grow:1;
}

ul li a		       {
 line-height:1.5;
 padding:8px 16px;
 display:block;
 text-align:center;
 border-radius:0.313em;
 background:PaleGoldenrod;
 margin:2px;
}
.last, .almostlast {
 max-width:320px;
}

@media (max-width: 800px) {
  ul::before {
   content: ' ';                         /*  added  */
   width:100%;                           /*  added, fill width and push the rest down  */
}
  .first {
   order: -1;                            /*  added, move before pseudo  */
   flex-grow:0;                          /*  changed, to not fill width  */
  }
}

@media (max-width: 700px) {
  ul::after {
   content: ' ';
   order: 1;
   width:100%;
  }
  ul li:nth-child(-n+3) {
   flex-grow:0;
  }
  ul li:nth-child(n+4) {
   order: 2;
   flex-grow:0;
  }
}

<ul>
     <li class="first"><a href="#">first item</a></li>
     <li><a href="#">second item</a></li>
     <li><a href="#">next item</a></li>
     <li><a href="#">item</a></li>
     <li><a href="#">pretty item</a></li>
     <li class="almostlast"><span><a href="#">item</a></span></li>
     <li class="last"><a href="#">last item</a></li>
</ul>

更新2

除了Cons7an7ine的答案之外，还可以将row-reverse wrap-reverse与order结合使用，这可以通过现有标记完成，其中一个设置足够nth-child来覆盖 n 多个菜单项。

ul {
 border:5px solid #a0522d;
 display:flex;
 flex-flow: row-reverse wrap-reverse;
 ...
}

ul li:nth-child(1)  { order: 100; }
ul li:nth-child(2)  { order:  99; }
ul li:nth-child(3)  { order:  98; }
...

Fiddle demo

Stack snippet

* {
 box-sizing: border-box;
}

html {   
 background:#a0522d;
}
ul {
 border:5px solid #a0522d;
 display:flex;
 flex-flow: row-reverse wrap-reverse;
 max-width:75em;
 padding:0;
 margin:20px auto;
 justify-content: center;
 align-items: center;
}
ul li {
 list-style:none;
 flex-grow:1;
 white-space: nowrap;
}

ul li a		       {
 line-height:1.5;
 padding:8px 16px;
 display:block;
 text-align:center;
 border-radius:0.313em;
 background:PaleGoldenrod;
 margin:2px;
}
.last, .almostlast {
 max-width:320px;
}

ul li:nth-child(1)  { order: 100; }
ul li:nth-child(2)  { order:  99; }
ul li:nth-child(3)  { order:  98; }
ul li:nth-child(4)  { order:  97; }
ul li:nth-child(5)  { order:  96; }
ul li:nth-child(6)  { order:  95; }
ul li:nth-child(7)  { order:  94; }
ul li:nth-child(8)  { order:  93; }
ul li:nth-child(9)  { order:  92; }
ul li:nth-child(10) { order:  91; }

<ul>
     <li class="first"><a href="#">first item</a></li>
     <li><a href="#">second item</a></li>
     <li><a href="#">next item</a></li>
     <li><a href="#">item</a></li>
     <li><a href="#">pretty item</a></li>
     <li class="almostlast"><span><a href="#">item</a></span></li>
     <li class="last"><a href="#">last item</a></li>
</ul>

如果以上都不是一个可行的解决方案，那么使用脚本可以在几乎任何可能的结果中做到这一点。

Flex菜单，换行后整行的第一个元素

3 个答案:

是