it-roy-ru.com

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

Я пытаюсь настроить макет 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/

277
mheavers

Вместо использования width (что является предложением при использовании flexbox), вы можете использовать flex: 0 0 230px;, что означает:

  • 0 = не расти (сокращение от flex-grow)
  • 0 = не сжиматься (сокращение от flex-shrink)
  • 230px = начинаться с 230px (сокращение от flex-basis)

что означает: всегда быть 230px.

см. Скрипку , спасибо @TylerH

О, и вам здесь не нужны justify-content и align-items.

560
Rudie

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

Начальная настройка гибкого контейнера: flex-shrink: 1 . Вот почему ваши столбцы сокращаются.

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

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

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

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

OR

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

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

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

46
Michael_B

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

Если это не проблема, тогда продолжайте. Запустите фрагмент. Перейти к полному просмотру страницы и изменить размер. Центр изменит себя без изменений в левый или правый 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>
1
2xSamurai