Bagaimana saya bisa memiliki dua kolom lebar tetap dengan satu kolom fleksibel di tengah?

Saya mencoba mengatur tata letak flexbox dengan tiga kolom di mana kolom kiri dan kanan memiliki lebar tetap, dan kolom tengah tertekuk untuk mengisi ruang yang tersedia.

Meskipun mengatur dimensi untuk kolom, mereka masih tampak menyusut karena jendela menyusut.

Adakah yang tahu bagaimana mencapainya?

Hal tambahan yang perlu saya lakukan adalah menyembunyikan kolom kanan berdasarkan interaksi pengguna, dalam hal ini kolom kiri masih akan tetap memiliki lebar tetap, tetapi kolom tengah akan mengisi sisa ruang.

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

Inilah JSFiddle: http://jsfiddle.net/zDd2g/185/

Alih-alih menggunakan width(yang merupakan saran saat menggunakan flexbox), Anda bisa menggunakan flex: 0 0 230px;yang berarti:

• 0= jangan tumbuh (kependekan dari flex-grow)
• 0= jangan menyusut (singkatan untuk flex-shrink)
• 230px= mulai pada 230px(singkatan untuk flex-basis)

yang berarti: selalu menjadi 230px.

Lihat biola , terima kasih @TylerH

Oh, dan kamu tidak perlu justify-contentdan di align-itemssini.

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;
}

Meskipun mengatur dimensi untuk kolom, mereka masih tampak menyusut karena jendela menyusut.

Pengaturan awal wadah fleksibel adalah flex-shrink: 1. Itu sebabnya kolom Anda menyusut.

Tidak masalah berapa lebar yang Anda tentukan ( bisa jadiwidth: 10000px ), dengan flex-shrinklebar yang ditentukan dapat diabaikan dan item fleksibel dicegah agar tidak melebihi wadah.

Saya mencoba mengatur flexbox dengan 3 kolom di mana kolom kiri dan kanan memiliki lebar tetap ...

Anda harus menonaktifkan penyusutan. Berikut ini beberapa opsi:

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

ATAU

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

ATAU, seperti yang direkomendasikan oleh spesifikasi:

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

7.2. Komponen Fleksibilitas

Penulis didorong untuk mengontrol fleksibilitas menggunakan flexsteno daripada dengan properti tangan langsung secara langsung, karena steno dengan benar me-reset komponen yang tidak ditentukan untuk mengakomodasi penggunaan umum .

Lebih detail di sini: Apa perbedaan antara basis-fleksibel dan lebar?

Hal tambahan yang perlu saya lakukan adalah menyembunyikan kolom kanan berdasarkan interaksi pengguna, dalam hal ini kolom kiri masih akan tetap memiliki lebar tetap, tetapi kolom tengah akan mengisi sisa ruang.

Coba ini:

.center { flex: 1; }

Ini akan memungkinkan kolom tengah untuk mengkonsumsi ruang yang tersedia, termasuk ruang saudara kandungnya ketika mereka dihapus.

Reiddle Fiddle

Kompatibilitas dengan browser yang lebih lama dapat menjadi hambatan, jadi disarankan.

Jika itu bukan masalah, silakan saja. Jalankan cuplikan. Buka tampilan halaman penuh dan ubah ukuran. Center akan mengubah ukurannya sendiri tanpa perubahan ke divs kiri atau kanan.

Ubah nilai kiri dan kanan untuk memenuhi kebutuhan Anda.

Terima kasih.

Semoga ini membantu.

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