Flexbox: настройка двух фиксированных колонок с изменяемой центром

Быстрый ответ

С помощью Flexbox в CSS легко можно выстроить структуру, включающую две колонки фиксированной ширины и одну гибкую находящуюся между ними. Контейнеру достаточно присвоить свойство display: flex;. Фиксированным колонкам задайте flex: 0 0 auto; и определите нужную ширину, в то время как центральной колонке можно приписать flex-grow: 1; для корректной подстройки под оставшееся пространство.

.container { display: flex; }
.fixed { flex: 0 0 100px; } /* Укажите нужную вам ширину для фиксированных колонок */
.flexible { flex-grow: 1; } /* Гибкая центральная колонка запонит всё доступное пространство */

<div class="container">
  <div class="fixed">Левая колонка</div>
  <div class="flexible">Центральная гибкая колонка</div> 
  <div class="fixed">Правая колонка</div>
</div>

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

Мы с Flex: 0 0 и отмене width на ты

Благодаря капабилити Flexbox получаем совершенно вместительное и доступное решение для адаптивного дизайна. Элемент с Flex: 0 0 [width] всегда воспроизводит заданную ширину и не перекрашивается при растяжении или сжатии контента. В мире Flexbox flex-basis предпочтительнее width, что обеспечивает нам больше управления и упреждения в деле распределения пространства.

Респонсивность

Задайте максимальную ширину max-width для контейнера и flex-shrink: 0 для колонок с фиксированной шириной, чтобы предотвратить их чрезмерных сжатий на узких экранах. Кроме того, не забудьте установить max-width: 100%; для изображений внутри флекс-элементов, чтобы сохранить их в рамках своих колонок.

Динамическое отображение колонок

Для повышения пользовательского удобства добавьте возможность сокрытия или демонстрации колонок по замыслу пользователя (в этом сценарии можно воспользоваться JavaScript). Обозначьте колонки убедительными границами для улучшения визуализации, как если бы вы набросали на бумаге разделяющие линии 😉.

Поддержка браузеров

Не оставляйте без внимания проверку уровня поддержки используемых возможностей Flexbox браузерами. Несмотря на отличную совместимость, некоторые свойства могут работать неравномерно в старых версиях браузеров. Тестирование макета в различных браузерах подспорье его корректного отображения.

Окунитесь в тонкости

Порассуждаем еще несколько хитросплетений, которые помогут в будущем:

• Выравнивание элементов: Свойства justify-content и align-items позволят вам тонко настроить расположение элементов.
• Регулирование гибкости: С помощью flex-basis и свойства flex вы можете влиять на распределение пространства при изменении ширины контейнера.
• Переключение видимости: Обеспечьте скрытие или демонстрацию колонок по своему желанию, соблюдая при этом целостность макета.

Визуализация

Визуализируйте этот механизм через образ гибкой занавеси, которая растягивается или сокращается между двуми прочными неподвижными столбами:

| 🏛️ | <- Гибкая занавеса -> | 🏛️ |

Аналогичный макет в HTML примет этот вид:

<div style="display: flex;">
  <aside style="flex: 0 0 150px;">🏛️</aside> <!-- Левый столб -->
  <main style="flex: 1;">Занавеска</main>    <!-- Занавеска — это гибкая часть -->
  <aside style="flex: 0 0 150px;">🏛️</aside> <!-- Правый столб -->
</div>

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

Увлекитесь живой демонстрацией

Практика — так и есть ключ для освоения новых знаний. Вы можете познакомиться с примером макета на JSFiddle: Интерактивный пример гибкого макета. Исследуйте различные ситуаций:

• Основы: Простой пример макета с фиксированными и гибкими колонками.
• Меняющаяся центральная колонка: Как изменение содержимого влияет на ширину гибкой колонки.
• Адаптивность: Наблюдайте, как ведет себя макет при изменении размеров окна браузера.

Добавьте личных настроек

Для большей индивидуальности вашего макета несколько CSS-вдохновений смогут значительно повысить его эстетику:

• Примените border-left и border-right к центральной колонке, чтобы создать более яркий образ.
• Подстройте margin и padding, освобождая элементам нужное пространство.
• Добавьте медиа-запросы для видоизменения дизайна на различных устройствах, обеспечивая вашему проекту разнообразие.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks
2. Основные принципы Flexbox | MDN
3. Flexbox в CSS | W3Schools
4. Создание CSS-круговой диаграммы: просто и удобно с помощью SVG — Smashing Magazine
5. Когда элементы Flexbox переносятся, контейнер не увеличивает свою ширину | Stack Overflow
6. Flexbox | Codrops
7. Наглядное руководство по свойствам Flexbox в CSS3 | DigitalOcean