Làm thế nào tôi có thể có hai cột chiều rộng cố định với một cột linh hoạt ở trung tâm?

Tôi đang cố gắng thiết lập bố trí flexbox với ba cột trong đó cột bên trái và bên phải có chiều rộng cố định và cột giữa uốn cong để lấp đầy không gian có sẵn.

Mặc dù thiết lập kích thước cho các cột, chúng dường như vẫn co lại khi cửa sổ co lại.

Bất cứ ai biết làm thế nào để thực hiện điều này?

Một điều nữa tôi sẽ cần làm là ẩn cột bên phải dựa trên tương tác của người dùng, trong trường hợp đó, cột bên trái vẫn giữ chiều rộng cố định, nhưng cột giữa sẽ lấp đầy phần còn lại của không gian.

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

Đây là một JSFiddle: http://jsfiddle.net/zDd2g/185/

Thay vì sử dụng width(đó là một gợi ý khi sử dụng flexbox), bạn có thể sử dụng flex: 0 0 230px;có nghĩa là:

• 0= không phát triển (tốc ký flex-grow)
• 0= không thu nhỏ (tốc ký cho flex-shrink)
• 230px= bắt đầu tại 230px(tốc ký flex-basis)

đó có nghĩa là: luôn 230px.

Xem fiddle , cảm ơn @TylerH

Ồ, và bạn không cần justify-contentvà align-itemsở đây.

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

Mặc dù thiết lập kích thước cho các cột, chúng dường như vẫn co lại khi cửa sổ co lại.

Một thiết lập ban đầu của một container flex là flex-shrink: 1. Đó là lý do tại sao các cột của bạn bị thu hẹp.

Không quan trọng bạn chỉ định chiều rộng nào ( có thểwidth: 10000px ), với flex-shrinkchiều rộng được chỉ định có thể bị bỏ qua và các mục flex được ngăn không cho tràn container.

Tôi đang cố gắng thiết lập một flexbox với 3 cột trong đó các cột bên trái và bên phải có chiều rộng cố định ...

Bạn sẽ cần phải vô hiệu hóa thu hẹp. Dưới đây là một số tùy chọn:

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

HOẶC LÀ

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

HOẶC, theo khuyến nghị của thông số kỹ thuật:

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

7.2. Các thành phần của tính linh hoạt

Các tác giả được khuyến khích kiểm soát tính linh hoạt bằng cách sử dụng tốc flexký thay vì trực tiếp với các thuộc tính của nó, vì tốc ký sẽ đặt lại chính xác bất kỳ thành phần không xác định nào để phù hợp với việc sử dụng chung .

Chi tiết hơn ở đây: sự khác biệt giữa cơ sở flex và chiều rộng là gì?

Một điều nữa tôi cần làm là ẩn cột bên phải dựa trên tương tác của người dùng, trong trường hợp đó, cột bên trái vẫn giữ chiều rộng cố định, nhưng cột giữa sẽ lấp đầy phần còn lại của không gian.

Thử cái này:

.center { flex: 1; }

Điều này sẽ cho phép cột trung tâm tiêu thụ không gian có sẵn, bao gồm cả không gian của anh chị em của nó khi chúng bị xóa.

Fiddle sửa đổi

Khả năng tương thích với các trình duyệt cũ hơn có thể là một trở ngại, vì vậy nên được khuyến khích.

Nếu đó không phải là một vấn đề thì hãy tiếp tục. Chạy đoạn trích. Đi đến xem toàn trang và thay đổi kích thước. Center sẽ tự thay đổi kích thước mà không thay đổi các div trái hoặc phải.

Thay đổi giá trị trái và phải để đáp ứng yêu cầu của bạn.

Cảm ơn bạn.

Hi vọng điêu nay co ich.

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