フレックスボックスの問題 - ディスプレイのフレックスは動作しません

Question

私はこのフレックスボックスの問題について助けが必要です。 フレックスボックスを使用してもスパンは表示されませんが、それ以上の幅はありません：50px

<div class="mobile-nav-toggle"> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 


    .mobile-nav-toggle{ 
     width: 50px; 
     height: 50px; 
     background: pink; 
     margin-right: 20px; 
     display: flex; 
     align-items: center; 

     span, 
     span::before, 
     span::after{ 
      content: ""; 
      display: block; 
      height: 2px; 
      background: #333; 
     } 
     } 

Answer 1

あなたのCSSに1つの欠落しているかっこがあります。私は、開発ツールで検査

.mobile-nav-toggle{ 
    width: 50px; 
    height: 50px; 
    background: pink; 
    margin-right: 20px; 
    display: flex; 
    align-items: center; 

    span, 
    span::before, 
    span::after { 
     content: ""; 
     display: block; 
     height: 2px; 
     background: #333;} 
    } 

Working demo 、それはスパンがは50px幅を有している示しています。