Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (2)

Наибольший вклад в теги

Все теги (8)

Лучшие ответы пользователя

Все ответы (4)
  • Как верстать подобные непропорциональные блоки флексами?

    @Kotovasofa
    space-beetween иspace-around отлично подходит и смотрится, когда у вас элементы блока одинакового размера(допустим элементы меню nav.

    Как можно сделать - >

    a.header-logo>Dashboard - ваш логотип.
    div.header-notification> обертка для строки поиска, уведомления и писем, в ней вы элементы выравниваете как раз флексами, допустим space-beetween.
    div.header-account> Hi, Robert - ваш блок с аккаунтом.

    Далее, если вы используете сетку на чистых флексах - можете указать размеры блоков с помощью flex-basis(размер блока), илиflex-grow(жадность блоков).

    Посмотрите примеры в сети, с использованием basis и grow. Понять их очень легко.

    PS: Пример 2. Ставите flex-basis 25% блок логотипа, flex-basis 15% - блоку аккаунта, flex-grow: 1 - блоку с уведомлениями, выравнивание элементов блока -
    justify-content: flex-start; - лого и уведомления, flex-end - аккаунт


    Либо - calc - Использование calc в верстке
    Ответ написан
    2 комментария
  • Как сверстать такой layout?

    @Kotovasofa
    Возможно я не дочитала, но в чём в итоге у вас проблема?
    header у вас фиксированный(фильтры на флексах с примерами дальше), левые блоки с карточками(назовите как удобно) - делаете флексами - flex-basis, flex-wrap, justify-content.Ваша правая часть остается всегда видимой - position: sticky.
    Разметка очень типовая, решается легко и с флексами и с гридами. Всё остальное уже за логикой(SPA\фреймворки).
    Ответ написан
    4 комментария

Лучшие вопросы пользователя

Все вопросы (33)