2つの自動幅フレックスボックス列が1つだけ折り返します

Question

2つの自動幅フレックスボックス列がインラインで表示されます。私は列に動的なコンテンツを持つことを期待しているので、メニュー項目を含む最初の列のみをラップする方法を見つけようとしています。

「d-flex」divの「flex-wrap」クラスを使用して両方をラップすることができますが、2つの列を互いにインラインに保ちながら最初の自動幅の列を折り返したいだけです。

私が使用しているフレックスボックスのクラスが既に含まれているBootstrap 4 CSSを使用しています。私が提供してくれた例をご覧ください。

マイ所望の結果は、この画像の例のようになります。

https://jsfiddle.net/j9v70qvy/

<div id="header-middle"> 
<div class="container"> 
    <div class="row align-items-center"> 
     <div class="header-middle-mobile-menu-outer col col-auto hidden-md-up"> 
      <a class="header-middle-mobile-menu-toggle"> 
       <i class="fa fa-bars"></i> 
      </a> 
     </div> 
     <div class="logo-outer col col-auto"> 
      <div class="logo-image"> 
       <a href="#"> 
        <img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiamcGxuM3VAhUTwWMKHVWaBgMQjRwIBw&url=http%3A%2F%2Fwww.freepik.com%2Ffree-vector%2Flogo-sample-text_701628.htm&psig=AFQjCNEHXsgvhjDI__g4Vk4GETXnCeRu6A&ust=1502481095339508"> 
       </a> 
      </div> 
     </div> 
     <div class="d-flex col pl-0 pr-0 align-items-center justify-content-end justify-content-md-start"> 
      <div class="flex-wrap header-middle-menu-outer col col-auto hidden-sm-down"> 
       <nav class="header-middle-menu"> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Portfolio</a></li> 
         <li><a href="#">Blog</a></li> 
         <li><a href="#">Sample Page</a></li> 
         <li><a href="#">Terms and Conditions</a></li> 
         <li><a href="#">Privacy Policy</a></li> 
        </ul> 
       </nav> 
      </div> 
      <div class="header-middle-social-media-icons-outer col col-auto"> 
       <nav class="header-middle-social-media-icons text-center icons-circle icons-sm"> 
        <ul class="social-media-icons"> 
         <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li> 
         <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li> 
         <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> 
         <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li> 
         <li><a href="#" target="_blank"><i class="fa fa-envelope"></i></a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

さて、私は私が最終的に契約が何であるかを考え出したと思います。あなたが持っているいくつかのクラスのブートストラップのデフォルトは、この場合にあなたが望むものとは異なります。

.col-autoのデフォルトのスタイル設定を.header-middle-menu-outerに変更する必要があります。あなたを殺しているflexという簡略表記のの値は0です。列が縮小することは許されていないので、画面の側から物が押し出され、折り返しが発生していません。

あなたは自分のCSSでこれを使用できるようにflexスタイリングは、.header-middle-menu-outerのために十分ですデフォルト：

.header-middle-menu-outer.col { 
    flex: initial; 
} 

左のカラムがなることを意味します flex: 0 1 autoのデフォルトに戻って物事を設定します

右の列が縮小しないうちに縮小することができます。左の列は折り返し、右の列は折り返します。

col-autoクラス（とにかく可能性があります）を取り除くことができますが、同じ問題のあるスタイル（flex: 0 0 auto）も含まれている.colのスタイルに戻ってしまいます。そのクラスも削除しない限り、おそらくあなたのCSSで優先スタイルをどちらかの方法で使用する必要があります。

Updated fiddle。

---

補足として、各要素にどのクラスを組み込むか再訪することをお勧めします。あなたがブラウザコンソールで何かを調べると、それらのクラスによって多くの競合するスタイルが適用されていることがわかりますが、これはあなたを助けてくれません。たとえば、.d-flexには、まったく逆のことを行うjustify-content-endとjustify-content-md-startの両方が含まれています。しかし、この場合、私はどちらも必要ないと信じています。上にリンクされたフィドルでは、両方のクラスを削除すると、レイアウトはまったく変更されません。

また、クラスcol-autoとcolは非常に似ています。 .header-middle-menu-outerの上記の場合、col-autoを削除しても問題が解決されない場合でも、この時点で実際にクラスが何かを追加しているとは確信していないため、あなたはそれを行う可能性があります。

私はあなただけで1オフとして、あなたのスタイルシートでそのドロップ、組み込みたいものを取り除いたクラスのいずれかの特定のスタイルルールがある場合は、その後排除し、可能性があり、多くのクラスがあると思います。ご希望出力するように少し混乱