Як я можу мати два стовпчики фіксованої ширини з одним гнучким стовпцем у центрі?

Я намагаюся налаштувати макет флексокса з трьома стовпцями, де лівий і правий стовпці мають фіксовану ширину, а центральний стовпець згинається, щоб заповнити наявний простір.

Незважаючи на встановлення розмірів для стовпців, вони все ще здаються зменшуватися, коли вікно скорочується.

Хтось знає, як це досягти?

Додатковим, що мені потрібно буде зробити, є приховати правий стовпець на основі взаємодії з користувачем, і в цьому випадку лівий стовпець все одно зберігатиме фіксовану ширину, але центральний стовпчик заповнює решту місця.

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

Ось JSFiddle: http://jsfiddle.net/zDd2g/185/

Замість використання width(що є пропозицією при використанні флешбоксу), ви можете використовувати, flex: 0 0 230px;що означає:

• 0= не рости (скорочення для flex-grow)
• 0= не стискати (скорочення для flex-shrink)
• 230px= початок з 230px(скорочення для flex-basis)

що означає: завжди бути 230px.

Дивіться скрипку , дякую @TylerH

О, і вам не потрібно тут justify-contentі align-itemsтут.

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

Незважаючи на встановлення розмірів для стовпців, вони все ще здаються зменшуватися, коли вікно скорочується.

Початкова настройка гнучких контейнерів є flex-shrink: 1. Ось чому ваші стовпчики скорочуються.

Не має значення, яку ширину ви вказали ( це може бутиwidth: 10000px ), при flex-shrinkцьому вказану ширину можна ігнорувати, а гнучкі елементи не дозволяють переповнювати контейнер.

Я намагаюся налаштувати флексбокс з 3 стовпцями, де лівий і правий стовпці мають фіксовану ширину ...

Вам потрібно буде відключити скорочення. Ось кілька варіантів:

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

АБО

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

АБО, як рекомендує специфікація:

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

7.2. Компоненти гнучкості

Авторам рекомендується керувати гнучкістю, використовуючи flexскорочення, а не безпосередньо його властивості, оскільки стенограма правильно скидає будь-які не визначені компоненти для задоволення загального використання .

Детальніше тут: Які відмінності між флекс-основою та шириною?

Додатково, що мені потрібно зробити, це приховати правий стовпець на основі взаємодії з користувачем, і в цьому випадку лівий стовпець все одно зберігатиме фіксовану ширину, а центральний стовпчик заповнює решту місця.

Спробуйте це:

.center { flex: 1; }

Це дозволить центральному стовпчику споживати доступний простір, включаючи простір його побратимів, коли вони видаляються.

Переглянута скрипка

Сумісність зі старими веб-переглядачами може бути тяжким, тому радимо.

Якщо це не проблема, тоді йдіть вперед. Запустіть фрагмент. Перейдіть до повного перегляду сторінки та зміни розміру. Центр змінить розмір себе, не змінюючи лівого або правого знаків.

Змініть ліві та праві значення, щоб відповідати вашим вимогам.

Дякую.

Сподіваюсь, це допомагає.

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