Я пытаюсь установить макет 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/> Someones Knocking at My Door
<br/> 01.12.13
</div>
</div> Вместо использования width (что является предложением при использовании flexbox), вы можете использовать flex: 0 0 230px; что значит:
0= не растут (сокращение для flex-grow)0= не сжиматься (сокращенно flex-shrink)230px= начало с 230px (сокращение для flex-basis) что означает: всегда должно быть 230px.
Смотрите скрипку, спасибо @TylerH
О, и вам не нужны justify-content и align-items.
Несмотря на настройку размеров столбцов, они все еще сжимаются, когда окно сжимается.
Первоначальная настройка контейнера flex 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 */
}
Авторы рекомендуют контролировать гибкость с помощью сокращения
flexа не с его прямыми свойствами непосредственно, как сокращенное правильно сбрасывает любые неуказанные компоненты для размещения common использует.
Подробнее здесь: В чем разница между гибким основанием и шириной?
Еще одна вещь, которую мне нужно сделать, это скрыть правый столбец на основе взаимодействия с пользователем, и в этом случае левый столбец сохранит свою фиксированную ширину, но центральный столбец заполнит остальную часть пространства.
Попробуйте следующее:
.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>