Bir esnek sütun ortada olan iki sabit genişlikli sütunu nasıl alabilirim?

Sol ve sağ sütunlar sabit genişliğe sahip üç sütunlu bir flexbox düzeni kurmaya çalışıyorum ve orta sütun kullanılabilir alanı doldurmak için esniyor.

Sütunlar için boyutlar ayarlamaya rağmen, pencere küçüldükçe hala küçülüyor gibi görünüyorlar.

Bunu nasıl başaracağını bilen var mı?

Yapmam gereken ek bir şey, kullanıcı etkileşimi temelinde sağ sütunu gizlemektir, bu durumda sol sütun hala sabit genişliğini koruyacaktır, ancak orta sütun alanın geri kalanını dolduracaktır.

#container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 1200px;
}

.column.left {
    width: 230px;
}

.column.right {
    width: 230px;
    border-left: 1px solid #eee;
}

.column.center {
    border-left: 1px solid #eee;
}

<div id="container">
    <div class="column left">
        <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p>
    </div>
    <div class="column center">
        <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    </div>
    <div class="column right">
        Balint Zsako
        <br/> Someone’s Knocking at My Door
        <br/> 01.12.13
    </div>
</div>

İşte bir JSFiddle: http://jsfiddle.net/zDd2g/185/

Kullanmak yerine width(flexbox kullanırken bir öneri), aşağıdakileri kullanabilirsiniz flex: 0 0 230px;:

• 0= büyüme (kısayol flex-grow)
• 0= küçülme (kısaltma flex-shrink)
• 230px= başlangıç 230px(kısayol için flex-basis)

Bu da demek oluyor ki: her zaman olmak 230px.

Keman bakın , teşekkürler @TylerH

Oh, justify-contentve align-itemsburaya ihtiyacınız yok.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

Sütunlar için boyutlar ayarlamaya rağmen, pencere küçüldükçe hala küçülüyor gibi görünüyorlar.

Esnek bir kabın başlangıç ​​ayarı flex-shrink: 1. Bu yüzden sütunlarınız daralıyor.

Size (belirtiniz genişliği ne olduğu önemli değildir olması gerektiğiwidth: 10000px ile) flex-shrinkBelirtilen genişlik göz ardı edilebilir ve esnek ürün kabı taşan engellenir.

Sol ve sağ sütunların sabit genişliğe sahip 3 sütunlu bir flexbox kurmaya çalışıyorum ...

Küçültmeyi devre dışı bırakmanız gerekir. İşte bazı seçenekler:

.left, .right {
     width: 230px;
     flex-shrink: 0;
 }  

VEYA

.left, .right {
     flex-basis: 230px;
     flex-shrink: 0;
}

VEYA, spec tarafından önerildiği gibi:

.left, .right {
    flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2. Esnekliğin Bileşenleri

Yazarlar, ortak kullanımlarıflex karşılamak için belirtilmemiş bileşenleri doğru bir şekilde sıfırladığı için, esnekliği doğrudan longhand özelliklerinden ziyade steno kullanarak kontrol etmeye teşvik edilir .

Daha fazla ayrıntı burada: Esnek taban ve genişlik arasındaki farklar nelerdir?

Yapmam gereken ek bir şey, kullanıcı etkileşimi temelinde sağ sütunu gizlemektir, bu durumda sol sütun hala sabit genişliğini koruyacaktır, ancak orta sütun alanın geri kalanını dolduracaktır.

Bunu dene:

.center { flex: 1; }

Bu, orta sütunun, kardeşleri çıkarıldıklarındaki alanı da dahil olmak üzere, kullanılabilir alanı tüketmesine izin verecektir.

Revize Keman

Eski tarayıcılarla uyumluluk bir sürükleme olabilir, bu yüzden tavsiye olun.

Bu bir sorun değilse, devam edin. Parçacığı çalıştırın. Tam sayfa görünümüne gidin ve yeniden boyutlandırın. Merkez, sol veya sağ div'lerde hiçbir değişiklik yapmadan kendini yeniden boyutlandıracak.

İhtiyacınızı karşılamak için sol ve sağ değerleri değiştirin.

Teşekkür ederim.

Bu yardımcı olur umarım.

#container {
  display: flex;
}

.column.left {
  width: 100px;
  flex: 0 0 100px;
}

.column.right {
  width: 100px;
  flex: 0 0 100px;
}

.column.center {
  flex: 1;
  text-align: center;
}

.column.left,
.column.right {
  background: orange;
  text-align: center;
}

<div id="container">
  <div class="column left">this is left</div>
  <div class="column center">this is center</div>
  <div class="column right">this is right</div>
</div>