停止：跳转到下一行上包裹

元素之后我有一些漂亮的CSS：停止：跳转到下一行上包裹

$itemHeight: 40px; 
$arrowModifier: 8; 
$pageBackgroundColor: $color-gray-50; 

.processBar { 
    display: flex; 
    flex-wrap: wrap; 

    &_item { 
     display: inline-block; 
     background: $color-gray-200; 
     height: $itemHeight; 
     position: relative; 
     flex-grow: 1; 

     text-align: center; 
     line-height: $itemHeight; 

     text-decoration: none; 
     color: $color-text; 
     padding-left: 10px; 
     padding-right: 10px; 

     &:hover { 
      text-decoration: none; 
      color: $color-text; 
     } 

     &-default { 
      &:hover { 
       background: $color-light-gray; 
      } 
     } 

     &-selected { 
      background: $color-white; 
     } 

     &:before, 
     &:after { 
      display: inline-block; 
      content: ""; 
      border-style: solid; 
      position: absolute; 
     } 

     &:first-child { 
      &:before { 
       left:0; 
       border: none; 
      } 
     } 

     &:not(:first-child) { 
      &:before { 
       left:0; 
       border-color: transparent transparent transparent $pageBackgroundColor; 
       border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier; 
      } 
     } 

     &:last-child { 
      &:after { 
       right: 0; 
       border: none; 
      } 
     } 

     &:not(:last-child) { 
      &:after { 
       right:0; 
       border-color: $pageBackgroundColor transparent; 
       border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier; 
      } 
     } 
    } 
}

下面是使用它的HTML：

<div class="processBar"> 
    <a href="javascript:" class="processBar_item">Label</a>  
    <a href="javascript:" class="processBar_item">Label</a>  
    <a href="javascript:" class="processBar_item">Label</a>  
    <a href="javascript:" class="processBar_item">Label</a>  
    <a href="javascript:" class="processBar_item">Label</a>  
    <a href="javascript:" class="processBar_item">Label</a> 
</div>

这里是做什么的：

但是在一定的尺寸:after元素可以Ĵ UMP下来，在这里看到：

我不明白这是为什么发生。我怎样才能阻止它发生？

来源

2017-03-17 user1283776

::before和::after flex容器上的伪元素被视为flex项目。

::before pseudo是第一项。 ::after伪是最后一个。所以你必须把它们看作是其他弹性项目的兄弟姐妹。

您可以尝试使用order属性来重新排列项目以实现所需的效果。

来源

2017-03-17 18:08:25

这是什么CSS预处理器？我在CodePen上使用了每个预编译器，并从$变量中获取错误，所以我将它们移除并填充到任何内容中。这是手写笔吗？无论如何，除了变量被删除和一些颜色变化之外，唯一重要的变化是我将flex-wrap:wrap更改为flex-wrap:nowrap。

代码片段

.processBar { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.processBar_item { 
 
    display: inline-block; 
 
    background: #c8c8c8; 
 
    height: 40px; 
 
    position: relative; 
 
    flex-grow: 1; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    text-decoration: none; 
 
    color: #000; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
.processBar_item:hover { 
 
    text-decoration: none; 
 
    color: red; 
 
} 
 

 
.processBar_item-default:hover { 
 
    background: #808080; 
 
} 
 

 
.processBar_item-selected { 
 
    background: cyan; 
 
} 
 

 
.processBar_item:before, 
 
.processBar_item:after { 
 
    display: inline-block; 
 
    content: ""; 
 
    border-style: solid; 
 
    position: absolute; 
 
} 
 

 
.processBar_item:first-child:before { 
 
    left: 0; 
 
    border: none; 
 
} 
 

 
.processBar_item:not(:first-child):before { 
 
    left: 0; 
 
    border-color: red; 
 
    border-width: 20px 0 20px 5px; 
 
} 
 

 
.processBar_item:last-child:after { 
 
    right: 0; 
 
    border: none; 
 
} 
 

 
.processBar_item:not(:last-child):after { 
 
    right: 0; 
 
    border-color: tomato; 
 
    border-width: 20px 0 20px 5px; 
 
}

<div class="processBar"> 
 
    <a href="javascript:" class="processBar_item">Label</a> 
 
    <a href="javascript:" class="processBar_item">Label</a> 
 
    <a href="javascript:" class="processBar_item">Label</a> 
 
    <a href="javascript:" class="processBar_item">Label</a> 
 
    <a href="javascript:" class="processBar_item">Label</a> 
 
    <a href="javascript:" class="processBar_item">Label</a> 
 
</div>

来源

2017-03-19 00:11:42 zer00ne

停止：跳转到下一行上包裹

回答

相关问题