Warum "flex-direction: row" nicht alle Elemente in einer einzelnen Zeile anordnet (+ ein Platzierungsproblem)?

Question

Hier ist mein HTML-Markup:

<div class="expander-container" data-css="expander-container"> 
    <div class="top-comment-container" data-css="top-comment-container"> 
    <a class="expand-anchor" data-css="expand-anchor" > 
     <div><span class="alternate-color icon-next arrow" 
        data-css="alternate-color icon-next _2Cx2VFM04V1vDEfkDEJ3Cw" ></span></div> 
     <div class="activity-item activity-container" 
     data-css="activity-item" > 
     <div class="activity-text" data-css="activity-text" ><span >Content</span></div> 
     <div class="activity-vote-count" data-css="activity-vote-count" ><span >0</span><span> vote</span></div> 
     <div class="activity-reply-count" 
      data-css="activity-reply-count" ><span>1</span><span> reply</span></div> 
     <time datetime="Wed May 25 2016 15:57:21"> 
      <span >May 25, 2016, 3:57 PM</span></time></div> 
    </a> 
    </div> 

</div> 

Hier ist meine CSS ist (in weniger)

.expander-container { 
    display: flex; 
    flex-direction: column; 
} 

.expand-anchor { 
    background: none; 
    border: none; 
    padding: 0; 
    cursor: pointer; 
    align-self: center; 

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

.icon-next:before { 
    content: ">"; 
} 

.arrow:before { 
    display: inline-block; 
    transform: rotate(0deg); 
    transition: transform .25s ease-out; 

    .expand& { 
    transform: rotate(90deg); 
    } 

} 

.top-comment-container { 
    display: flex; 
    flex-direction: row; 
    align-items: flex-start; 
    border: 1px solid green; 
    flex-wrap: nowrap; 
} 

.reply-container { 
    display: flex; 
} 

// activity-item 
.activity-item { 
    margin-left: 5px; 
} 
.reply-item { 
    margin-left: 10px; 
    border: 1px solid blue; 
} 
.activity-container { 
    display: flex; 
} 
.activity-text { 
    align-self: center; 
    flex-grow: 1; 
    flex: 5; 
    // flex-basis: 100; 
} 
.activity-vote-count { 
    align-self: center; 
    // width: 10%; 
    flex: 1; 
} 
.activity-reply-count { 
    align-self: flex-end; 
    // flex-basis: 1; 
    // width: 10%; 
    flex: 1; 
} 
.activity-container { 
    align-self: center; 
} 

Was will ich erreichen ist, alle diese Elemente auf einer einzelnen Achse ausgerichtet haben.

z.B.

> Content       0 vote 1 reply May 25, 2016, 3:57 PM 

jedoch, wie Sie in meinem codepen Coode (http://codepen.io/kongakong/pen/YWKvgG?editors=1100) sehen kann, der Pfeil nimmt irgendwie eine Zeile. Der Rest des Inhalts wird in die nächste Zeile gequetscht.

Ich habe ein paar Dinge ausprobiert, z.B. Fügen Sie flex-basis, flex-wrap: nowrap usw. hinzu, aber sie haben keine Wirkung.

Eine zweite Frage ist, wie kann ich eine feinere Kontrolle über die Platzierung haben? Ich möchte, dass der Text "Inhalt" den größten Teil des Platzes in einer Zeile einnimmt. Informationen wie Abstimmung und Zeit sollten auf die rechte Seite verschoben werden. Ich habe den 'flex-grow: 1' auf den Text angewendet, aber er wächst nicht und füllt den Raum.

Answer 1

Flex-Reihe funktioniert, indem ihre unmittelbaren Kinder in einer Reihe ausgerichtet werden. Sie haben Ihre Elemente zu tief verschachtelt. Alles, was Sie in derselben Zeile haben wollen, muss Geschwister sein. Sie können einige Arbeit sehe ich mit Flex Referenz http://codepen.io/steezeburger/pen/LNEaKv

<div class="flex-row"> 

    <div class="wrapper"> 
     <div class="flex-column skinny"> 
     <span class="flex-vertical-center af af-icon" data-bind="css: action_color"> 
      <i class="fa fa-check"></i> 
     </span> 
     </div> 

     <div class="flex-column"> 
     <span class="af af-action">New Order</span> 
     <span class="af af-name">John Carmack</span> 
     </div> 
    </div> 


    <div class="flex-column"> 
     <span class="af af-time-lapsed">13m ago</span> 
     <span class="af af-value">$65</span> 
    </div> 


</div> 

über diesem .wrapper und dem letzten .flex- getan haben etwas weiter fortgeschritten als ich Spalten in meinen Reihen verschachtelt haben, aber Sie können Dies ist sehen Spalte div wird in derselben Zeile sein. Den CodePen finden Sie für ein klareres Beispiel.

Answer 2

versuchen diesen Code

<style> 
     .top-comment-container { 
      width: 40em; 
     } 
     .alternate-color { 
      display: inline-block; 
     } 

     .activity-item { 
      display: flex; 
      justify-content: space-between; 
     } 
     .abcd { 
      display: flex; 
     } 

    </style> 

</head> 

<body> 

    <div class="expander-container" data-css="expander-container"> 
     <div class="top-comment-container" data-css="top-comment-container"> 
      <a class="expand-anchor" data-css="expand-anchor"> 
       <div><span class="alternate-color icon-next arrow" data-css="alternate-color icon-next _2Cx2VFM04V1vDEfkDEJ3Cw"></span></div> 
       <div class="activity-item activity-container" data-css="activity-item"> 
        <div class="activity-text" data-css="activity-text"><span>Content</span></div> 
        <div class="abcd"> 
         <div class="activity-vote-count" data-css="activity-vote-count"><span>0</span><span> vote</span></div> 
         <div class="activity-reply-count" data-css="activity-reply-count"><span>1</span><span> reply</span></div> 
         <time datetime="Wed May 25 2016 15:57:21"> 
          <span>May 25, 2016, 3:57 PM</span> 
         </time> 
        </div> 
       </div> 
      </a> 
     </div> 

    </div> 
</body> 

Margen gelten, wie Sie möchten ..