Я пытаюсь настроить макет 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
здесь.источник
flex-grow
определен (как, скажем, 1). Обновленная скрипка .flex-grow: 1
все еще требуется для колонки с жидкостью в Chrome 53. В противном случае это не займет остальную часть ширины. Я полагаю, что ответ должен учитывать этот факт.flex: 0 0 200px
действует так же, какwidth: 200px; flex-shrink: 0
.Начальная установка из гибкого контейнера
flex-shrink: 1
. Вот почему ваши столбцы сокращаются.Неважно, какую ширину вы укажете ( это может быть
width: 10000px
),flex-shrink
указанная ширина может быть проигнорирована, а изгибаемые элементы не будут переполнены контейнером.Вам нужно будет отключить сжатие. Вот несколько вариантов:
ИЛИ
ИЛИ, как указано в спецификации:
Подробнее здесь: Каковы различия между flex-base и width?
Попробуй это:
Это позволит центральному столбцу занимать доступное пространство, включая пространство его братьев и сестер, когда они удаляются.
Пересмотренная скрипка
источник
flex: 1;
в центрdiv
было достаточно, спасибо.Совместимость со старыми браузерами может быть проблемой, так что имейте в виду.
Если это не проблема, тогда продолжайте. Запустите фрагмент. Перейти к полному просмотру страницы и изменить размер. Центр изменит свой размер без изменений в левый или правый div.
Измените левое и правое значения, чтобы удовлетворить ваши требования.
Спасибо.
Надеюсь это поможет.
источник