Uncategorized

Адаптивная верстка с flex

27 сентября, 2024


Адаптивная верстка (responsive web design) — это подход к созданию веб-страниц, при котором их дизайн и содержимое автоматически подстраиваются под размер экрана устройства, на котором они просматриваются.


Flexbox (Flexible Box Layout) — это модуль CSS, предназначенный для упрощения процесса создания гибких и адаптивных макетов веб-страниц.


Верстаем картинки с помощью flex


Размер картинки 800 х 400px; отношение высот блоков на картинке как 1:4:1, тексты Text11, Text12 прижаты к краям, тексты Text31, Text32 имеют отступ 5px от краев

    Образец можно разбить на 3 области различной высоты. Создаем эти области c именами классов f1, f2, f3. Обернем их в контейнер с именем класса f0 который будет задавать ширину области.Html:
    <div class=»f0″>
    <div class=»f1″> &nbsp;</div>
    <div class=»f2 «>&nbsp;</div>
    <div class=»f3″>&nbsp;</div>
    </div>
    Отношение высот блоков как 1 : 3 : 1
    Направление расположения флексов и высота области (400px) в классе f0
    Ширина области 800px в селекторе wrapper
    Свойства flex растягивают флексы в заданной пропорции    		Css:
    .wrapper{
    width: 800px;
    max-width: 100%;
    }
    .f0{
    display: flex;
    flex-direction: column;
    height: 400px;
    }
    .f1, .f3{
    flex:1;
    }
    .f2{
    flex:3;
    }
    Html изменения :
    <div class=»f0 wrapper»>
    Для реализации верстки второго блока разобьем его на 3 контейнера с выравниванием по горизонтали или вертикали. Размеры этих трех контейнеров равны между собой.
    Выберем разбивку по горизонтали    		Css:
    .f21, .f23{
    flex: 1;
    }
    .f22{
    flex: 1;
    }
    .f2{ /* Измененния: */
    flex:3;
    display: flex;
    flex-direction: column;
    }

    Html:
    <div class=»f2 «>
    <div class=»f21″>
    <span>Text11</span>
    <span>Text12</span>
    </div>
    <div class=» «>Text21</div>
    <div class=»f23″>
    <span>Text31</span>
    <span>Text32</span>
    /div>
    </div>

    Флексы f21 и f23 распределим по строке. Крайние элементы будут прижаты к краям области    		Css:
    .f21, .f23{
    flex: 1;
    display: flex;
    justify-content: space-between;
    }
    Селекторы
    center_x и center_y для центрирования контейнеров по горизонтали или вертикали    		Css:
    .center_x{
    display: flex;
    align-items: center;
    }
    .center_y{
    display: flex;
    justify-content: center;
    }
    Html изменения:
    <div class=»f22 center_x center_y»>Text21</div>
    <div class=»f3 center_y»>
    Выровняем содержимое контейнера f23 по нижнему краю и добавим поля.f23{
    display: flex;
    align-items: flex-end;
    margin: 5px 10px;
    }

    Результат