Чему я научился на JavaScript 30 (веб-курс — https://javascript30.com/)

Кодинг на Github

дисплей: гибкий

En-MDN: гибкий

У этого метода много свойств. Основное приложение:

#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;

#flex-container › .flex-item {
-webkit-flex: auto;
flex: auto;

#flex-container › .raw-item {
ширина: 5rem;

Элемент .raw будет иметь относительную фиксированную ширину, 5rem. Ширина .flex-элемента будет зависеть от .raw-item, который является шириной родителя — шириной .raw-элемента.

4 основных шага для создания эффектов галереи в примере

Шаг 1: установите display:flex в качестве родительского элемента;

.panels {
min-height:100vh;
overflow: hidden;
display: flex;

Шаг 2: установите значение гибкости для дочернего элемента;

.panel{
flex: 1;
justify-content: center;
display: flex;
flex-direction: column;

Шаг 3. Установите целевой класс для стиля после изменения.

.panel.open {
flex: 5;
размер шрифта: 40 пикселей;

Шаг 4: используйте переключатель имени класса для управления целевым классом.

функция toggleOpen(){this.classList.toggle('open');}