フレックスボックスの残りの*水平*スペースにdivを埋める

204

フレックスボックスに2つのdivが並んでいます。右手は常に同じ幅である必要があり、左手は残りのスペースをつかむだけです。しかし、特に幅を設定しない限り、効果はありません。

したがって、現時点では96％に設定されており、実際に画面を押しつぶすまで問題ありません。その後、右側のdivに必要なスペースが不足します。

私はそれをそのままにしておくことができると思いますが、それは間違っていると感じています-言う方法があるように：

正しいものは常に同じです。あなたは左側にいます-あなたは残っているすべてを手に入れます

.ar-course-nav {
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
            </strong>
    </div>
    <div style="width:100%; display:flex; justify-content:space-between;">
      <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
        A really really really really really really really really really really really long department name
      </div>
      <div style="color:#555555; text-align:right; white-space:nowrap;">
        Created: 21 September 2016
      </div>
    </div>
  </div>
  <div style="margin-left:8px;">
    <strong>&gt;</strong>
  </div>
</div>

スニペットを展開

html css flexbox

— アダム・ベンソン
ソース

324

flex-growプロパティを使用して、フレックスアイテムが主軸の空き領域を消費するようにします。

このプロパティは、画面のサイズ変更や他のアイテムの追加/削除などの動的環境に合わせて長さを調整しながら、アイテムを可能な限り拡大します。

一般的な例は、flex-grow: 1または、省略形プロパティを使用したflex: 1です。

したがって、width: 96%div ではなくを使用しますflex: 1。

あなたが書いた：

したがって、現時点では96％に設定されており、実際に画面を押しつぶすまで問題ありません。その後、右側のdivに必要なスペースが不足します。

固定幅divの収縮は、別のflexプロパティに関連しています。 flex-shrink

デフォルトでは、フレックスアイテムはflex-shrink: 1、コンテナーのオーバーフローを防ぐために縮小できるように設定されています。

この機能を無効にするには、を使用しますflex-shrink: 0。

詳細については、こちらの回答の「flex-shrink因子」セクションを参照してください。

フレックスベースと幅の違いは何ですか？

主軸に沿ったフレックス配置の詳細については、こちらをご覧ください：

CSSフレックスボックスで、「justify-items」および「justify-self」プロパティがないのはなぜですか？

交差軸に沿ったフレックスアライメントの詳細については、こちらをご覧ください。

flex-wrapはalign-self、align-items、align-contentとどのように連携しますか？

— マイケル・ベンジャミン
ソース

1

私は同じ状況で、使用しflex-grow: 1てもと同じ効果がありませんでしたflex: 1。なぜ違うのか知っていますか？（私は後者の問題を修正しました、thx）

— WhGandalf 2018

4

ではflex-grow: 1、flex-basisプロパティはのままでauto、そのデフォルト値は、。を使用するflex: 1と、flex-basisプロパティはに変わります0。詳細なレビューについては、ここで私の回答を参照してください：stackoverflow.com/q/43520932/3597276 @WhGandalf

— Michael Benjamin

flex-shrinkは私にとって鍵でした:)

— pixelearth

25

基本的に、コードの「行」に中央のセクションを配置して、両側のコンテンツに自動調整するようにしていました（私の場合、点線のセパレータ）。@Michael_Bが提案したように、キーはdisplay:flex行コンテナーで使用され、少なくとも行の中央コンテナーのflex-grow値が外部コンテナーよりも少なくとも1大きいことを確認します（外部コンテナーにflex-growプロパティが適用されていない場合、中央コンテナーに必要なのは1つのみですflex-grow）。

これが私がやろうとしていたことの写真と、それを解決する方法のサンプルコードです。

編集：点線の下部の境界線は、ブラウザーの表示方法によっては奇妙に見える可能性があります。私は個人的に、繰り返しの背景画像として黒い丸のSVGを使用し、適切なサイズと中央のコンテナーの下部に配置することをお勧めします。時間があるときに、この代替ソリューションを追加します。

.row {
  background: lightgray;
  height: 30px;
  width: 100%;
  display: flex;
  align-items:flex-end;
  margin-top:5px;
}
.left {
  background:lightblue;
}
.separator{
  flex-grow:1;
  border-bottom:dotted 2px black;
}
.right {
  background:coral;
}

<div class="row">
  <div class="left">Left</div>
  <div class="separator"></div>
  <div class="right">Right With Text</div>
</div>
<div class="row">
  <div class="left">Left With More Text</div>
  <div class="separator"></div>
  <div class="right">Right</div>
</div>
<div class="row">
  <div class="left">Left With Text</div>
  <div class="separator"></div>
  <div class="right">Right With More Text</div>
</div>

スニペットを展開

— ブレット84c
ソース