• 0
yaparoff

Как сделать такое на flexbox?

Спросил yaparoff

    Вопрос

    yaparoff    0

    yaparoff
    Опубликовано:

    Нужно с помощью flexbox сделать такое

    SNIMOKEKRANA-06.07.2016-173740117ea.md.p

    Как это сделать?

    Пока что получается вот так

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах

    1 ответ на этот вопрос

    Рекомендуемые сообщения

    • 0

    by chris    89

    by chris
    Опубликовано: 
    .wrapper {
  width: 320px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.wrapper__item {
  width: 150px;
  height: 150px;
  background-color: red;
  margin: 5px;
}

     

    • Like 1

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас
    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google
    Перейти к списку вопросов Проблемы верстки

    • Похожие публикации

      • abdulow
        Адаптивная верстка сайтов(Flexbox/Bootstrap)
        Автор: abdulow
        Меня зовут Абдулов, я Front-End разработчик. 
        Цену и сроки обсудим после просмотра макета. 
        Вот одна из моих версток - tokmaganbet.github.io/blacksea
        Могу сверстать/сделать : 
        Landing page 
        Натянуть на WP 
        Сайт-визитки 
        Корпоративные сайты 
        Адаптивные и отзывчивые сайты 
        Навыки: 
        HTML 5 
        CSS3 
        Javascript(jQuery) 
        Умею пользоваться : 
        Pixel Perfect 
        Gulp 
        Sass(Scss) 
        Bootstrap 
        GitHub 
        FlexBox
        Email : [email protected]
        Skype : abdulov_96
      • Kolya_YA
        Выравиние во Flexbox
        Автор: Kolya_YA
        Подскажите, как можно растянуть блоки 2, 3, 4 по высоте блока 1? space-between и align-items не срабатывает.
        Пример тут: 
         
      • R45H
        Флексбокс. Неправильное отображение в Firefox
        Автор: R45H
        Буду очень благодарен, если вы мне подскажите, как можно решить проблему.
        Скидываю простейший пример вёрстки, демонстрирующей проблему, без лишнего мусора - https://github.com/R45H/bug-in-ff.

        Нужно, чтобы в firefox отображалось также, как и в хроме. С учётом адаптивности.
        Здесь используется флексбокс и паддинг снизу в % для сохранения пропорций картинок.

        Проблема заключается в том, что при указании flex-direction: column; лиса схлопывает картинки (а хром нет).
        Мне подойдёт любое решение, но поведение и вид должны быть такими же, как в примере в хроме:
        - пропорциональное уменьшение картинок;
        - блоки с синей обводкой растягиваются на всю оставшуюся высоту;
        - голубой и зелёный блоки подстраиваются по высоте друг под друга (неважно где сколько текста);
        - на планшетах всё должно разворачиваться по-бутстраповски (как сейчас в примере).

        Заранее спасибо за помощь. 

    Карта разработчиков

    Карта участников

    Отметь себя на карте для поиска или предложения работы