divのテキストをテキスト整列しないのはなぜですか？

Question

divのテキストの整列はtext-alignで行います。これは、通常、正常に動作します：

<div style="text-align:right;border:1px solid red"> 
 
    this goes to the right 
 
</div>

私はアライメントが適用されていない（vue.jsの助けを借りて生成された大規模なHTMLの途中で）コードの部分を持っています。私はdivの幅を強制し、それ内のテキストを右揃えになりたかった。

あり、右に移動する8:00ための十分なスペースがあるが、それは中央にとどまります。 CSSスタックは、この要素のための特別な何も表示されません：

この位置合わせのための理由（または不足のために）何ができますか？

注：HTML/SCSSコード全体がかなり含まれているわけではありません。うまくいけば、CSSスタックで十分でしょうか？

Answer 1

Flexの項目がフレックスコンテナの該当する値がstretchに設定されていない場合は、コンテンツの幅や高さに合わせて縮小し、フレックス項目のflex-growではありませんtext-alignを使用する方が良いだろう1に設定します。つまり、ボックスのサイズはコンテンツのサイズなので、text-alignは効果がありません。 （もちろん、flex-basisとwidth要因もありますが、ここでは説明しません。）

はまた、フレックスコンテナが自動的に匿名フレックス項目に包まれている内に直接含まれているテキストに注意してください。

は、Flexコンテナでこれを設定することによって、これを修正することができます

div.start_display { 
    display: flex; 
    justify-content: flex-end; 
} 

それとも、あなたがそこにフレックス必要がない場合は、デフォルトのブロックにそれをリセットします。

div.start_display { 
    display: block; 
    text-align: right; 
} 

あるいは、ラップ別のタグには、のは言わせ<span>：

div.start_display span { 
    flex: 1; 
    text-align: right; 
} 

あなたはルの特異性を高める必要があるかもしれませんそれはスクリーンショットでは不明なので、セレクターのベル。

Answer 2

ここでdisplay: flexを使用しているため、text-alignは機能しません。

div { 
justify-content: space-around; 
} 

div { 
justify-content: flex-end; 
} 

にある[編集]を変更します。@Jacobグレー通知として、 div要素に display: flexを追加することは良いアイデアではありません。 divからこのプロパティを削除し、あなたがそれを必要な場所