Esnek dolgusunda div dolgusunu * yatay * boşluk bırak

Flexbox'ta yan yana 2 div var. Sağ el her zaman aynı genişlikte olmalı ve sol elin sadece kalan alanı kapmasını istiyorum. Ama özellikle genişliğini ayarlamadığım sürece olmaz.

Şu anda, ekranı gerçekten ezene kadar Tamam görünen% 96'ya ayarlandı - o zaman sağdaki div ihtiyaç duyduğu alandan biraz açlık çekiyor.

Sanırım olduğu gibi bırakabilirim ama yanlış geliyor - söylemenin bir yolu olmalı:

doğru olan her zaman aynıdır; soldasınız - kalan her şeyi elde edersiniz

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

flex-growEsnek bir öğenin ana eksende boş alan tüketmesi için özelliği kullanın .

Bu özellik, öğeyi ekran yeniden boyutlandırma veya diğer öğelerin eklenmesi / çıkarılması gibi dinamik ortamlara göre ayarlayarak öğeyi mümkün olduğunca genişletir.

Yaygın bir örnek flex-grow: 1veya steno özellik kullanılarak flex: 1.

Bu nedenle, div'iniz yerine width: 96%kullanın flex: 1.

Sen yazdın:

Şu anda, ekranı gerçekten ezene kadar Tamam görünen% 96'ya ayarlandı - o zaman sağdaki div ihtiyaç duyduğu alandan biraz açlık çekiyor.

Sabit genişlikli div'in ezilmesi başka bir esnek özellik ile ilgilidir: flex-shrink

Varsayılan olarak, flex-shrink: 1konteynerin taşmasını önlemek için büzülmelerini sağlayan esnek öğeler ayarlanır .

Bu özelliği devre dışı bırakmak için kullanın flex-shrink: 0.

Daha fazla ayrıntı için bkz faktör burada cevap bölümü:flex-shrink

• Esnek taban ve genişlik arasındaki farklar nelerdir?

Burada ana eksen boyunca esnek hizalama hakkında daha fazla bilgi edinin :

• CSS Flexbox'ta neden "bloklama öğeleri" ve "bloklama" özellikleri yoktur?

Çapraz eksen boyunca esnek hizalama hakkında daha fazla bilgiyi burada bulabilirsiniz:

• Esnek sarma, hizalama-benlik, hizalama öğeleri ve hizalama içeriği ile nasıl çalışır?

Temelde kodumu her iki tarafta (benim durumumda, noktalı bir çizgi ayırıcı) otomatik olarak ayarlamak için bir 'satır' bir orta bölüm var almaya çalışıyordu. @Michael_B'nin önerdiği gibi, anahtar display:flexsıra kapsayıcısında kullanıyor ve en azından sıradaki orta kabınızın flex-growdış kaplardan en az 1 daha yüksek bir değere sahip olduğundan emin olmak (dış kaplara herhangi bir flex-growözellik uygulanmamışsa, orta kap için yalnızca 1 gerekir flex-grow).

İşte yapmaya çalıştığım bir resim ve nasıl çözdüğüm için örnek kod.

Düzenleme: Tarayıcınızın görüntülemesine bağlı olarak noktalı alt kenarlık muhtemelen garip görünecektir. Şahsen, siyah kabın SVG'sini tekrarlanan bir arka plan görüntüsü olarak, düzgün bir şekilde boyutlandırılmış ve orta kabın altına yerleştirilmiş olarak kullanmanızı tavsiye ederim. Zaman bulduğumda bu alternatif çözümü ekleyeceğim.

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