web-dev-qa-db-ja.com

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

私はフレックスボックスに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>
htmlcsscss3flexbox
117
Adam Benson

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

このプロパティは、画面のサイズ変更や他の項目の追加/削除など、動的な環境に合わせて長さを調整して、項目をできるだけ拡張します。

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

したがって、divのwidth: 96%の代わりにflex: 1を使用してください。

あなたが書いた：

そのため、現時点では、96％に設定されていて、実際に画面を潰すまでは問題ないように見えます。それから右側のdivには、必要なスペースが少し足りなくなります。

固定幅divのスカッシュは別のflexプロパティに関連しています。flex-shrink

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

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

詳細はここの答えのThe flex-shrink要素のセクションを見てください：

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

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

184
Michael_B

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

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

編集：あなたのブラウザがそれをどのように表示するかによって、点線の下のボーダーはおそらく変に見えるでしょう。私は個人的には、適切なサイズで中央のコンテナの下部に配置された、繰り返し背景画像として黒い円のSVGを使用することをお勧めします。私は時間があるときにこの代替ソリューションを追加します。

enter image description here 

.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>
14
Brett84c