停止：ラップ

Question

に次の行にジャンプからの要素の後、私はいくつかの美しい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要素できるJここに見られるように、ダウンUMP：

ことが起こっている理由を私は理解していません。どうしたらそれをやめることができますか？

Answer 1

フレックスコンテナ上の疑似要素はフレックスアイテムと見なされます。

::before疑似が最初の項目です。 ::after疑似が最後です。だからあなたはそれらを他のフレックスアイテムの兄弟として考える必要があります。

orderプロパティを使用して、アイテムを並べ替えて、効果を得ることができます。

Answer 2

これはどのCSSプリプロセッサですか？私はCodePen上のすべてのプリコンパイラを使用して$変数からエラーを受け取りましたので、それらを削除して何かで埋めました。このスタイラスですか？とにかく、変数が削除され、色が変わるだけでなく、重要な変更点はflex-wrap:wrapをflex-wrap:nowrapに変更したことです。

SNIPPET

.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>