スパンのテキストを整列する

Question

私は同じ行に「試してみよう」としていますが、そのあとでは「リンゴ」ブロックが表示されます。私は間違って何をしていますか？

.aaa { 
 
\t display: flex; 
 
    padding: 20px; 
 
\t background-color: #000; 
 
\t font-size: 2em; 
 
} 
 

 
.aaa span { 
 
    display: inline; 
 
\t color: red; 
 
    justify-content: center; 
 
} 
 

 
.q { 
 
background-color: green; 
 
}

<div class="q"> 
 
<a href="#" class="aaa">Try these <span>apples apples apples apples apples applesapples apples applesapples apples applesapples apples apples</span></a> 
 
</div>

Answer 1

メイン容器にwhite-space:nowrapを単に追加して、リンゴC

ontainer私はまた、ほとんどのテキスト

.aaa { 
 
    display: flex; 
 
    padding: 20px; 
 
    background-color: #000; 
 
    font-size: 2em; 
 
    white-space: nowrap; 
 
} 
 

 
.aaa span { 
 
    display: inline; 
 
    color: red; 
 
    justify-content: center; 
 
    white-space: initial; 
 
} 
 

 
.q { 
 
    background-color: green; 
 
}

<div class="q"> 
 
    <a href="#" class="aaa">Try these &nbsp;<span>apples apples apples apples apples applesapples apples applesapples apples applesapples apples apples</span></a> 
 
</div>

Answer 2

あなたが作る必要があるの変更点：

• がflexとしてq class containerとanchor class aaaの両方を行い、これはあなたの同じ行に整列アンカーして、スパンを持っていることを保証しますアンカーの内側もデモンストレーションされたように整列しています次に、子コンテナの両方でflex：1のプロパティを使用します。つまり、q => aaaとaaa=>spanです。これにより、サイズ変更時に柔軟に対応できるようになります。

.aaa { 
 
    display: flex; 
 
    flex: 1; 
 
    padding: 20px; 
 
    background-color: #000; 
 
    font-size: 2em; 
 
} 
 

 
.aaa span { 
 
    flex: 1; 
 
    color: red; 
 
    justify-content: center; 
 
} 
 

 
.q { 
 
    background-color: green; 
 
    display: flex; 
 
}

<div class="q"> 
 
    <a href="#" class="aaa"> Try these &nbsp;<span> apples apples apples apples apples applesapples apples applesapples apples applesapples apples apples</span></a> 
 
</div>

Answer 3

8/12かかります4/12列とリンゴを取るだろう "これらは試してみてください" gridにそれを入れてみてください。または、tableに2つのセクションを入れて、境界が見えないようにしてください。

Answer 4

display：flex;コンテンツの各ブロックを取り込み、それを独自のエンティティのように扱い、フレックス設定をしてもそれを設定しようとします。この場合、デフォルトを使用しています。これは、出力を行う必要があり

flex-direction: column; 

：

基本的に、それはあなたが、彼らは互いの上にあるように、フレックス方向を設定するので、これを試してみたい、この

[any amount] [any other] 
[of content] [content ] 

をやっている

[any amount of content] 
[any other content]