Как я могу иметь два столбца фиксированной ширины с одним гибким столбцом в центре?

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

Несмотря на настройку размеров для столбцов, они по-прежнему уменьшаются при уменьшении окна.

Кто-нибудь знает, как этого добиться?

Еще одна вещь, которую мне нужно сделать, это скрыть правый столбец на основе взаимодействия с пользователем, и в этом случае левый столбец будет по-прежнему сохранять фиксированную ширину, но центральный столбец будет заполнять оставшееся пространство.

#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(что является предложением при использовании flexbox), вы можете использовать, 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указанная ширина может быть проигнорирована, а изгибаемые элементы не будут переполнены контейнером.

Я пытаюсь настроить flexbox с 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сокращение, а не напрямую с его свойствами, так как сокращение корректно сбрасывает любые неуказанные компоненты для обеспечения общего использования .

Подробнее здесь: Каковы различия между flex-base и width?

Еще одна вещь, которую мне нужно сделать, это скрыть правый столбец в зависимости от взаимодействия с пользователем, в этом случае левый столбец будет по-прежнему сохранять фиксированную ширину, но центральный столбец будет заполнять оставшееся пространство.

Попробуй это:

.center { flex: 1; }

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

Пересмотренная скрипка

Совместимость со старыми браузерами может быть проблемой, так что имейте в виду.

Если это не проблема, тогда продолжайте. Запустите фрагмент. Перейти к полному просмотру страницы и изменить размер. Центр изменит свой размер без изменений в левый или правый div.

Измените левое и правое значения, чтобы удовлетворить ваши требования.

Спасибо.

Надеюсь это поможет.

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