Search the Community

Showing results for tags 'Flex'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML и CSS
    • Для начинающих
    • Препроцессоры, постпроцессоры и шаблонизаторы
    • Методологии
    • Фреймворки и библиотеки
  • JavaScript
    • Для начинающих
    • Фреймворки и библиотеки
    • Скрипты и плагины
  • Разработка сайтов
    • Для начинающих
    • Инструменты разработки, сборки и автоматизации
    • Аудит и анализ кода
    • Программное обеспечение разработчика
    • Веб-дизайн
    • Мобильные платформы
    • Open Source
  • Серверное программирование
    • Для начинающих
    • PHP
    • Платформы и языки программирования
    • Базы данных
    • Скрипты, готовые движки, CMS, конструкторы
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Сервер
    • Техническая поддержка
    • Веб-сервер
    • Базы данных
    • Хостинг
    • Домены
  • Интернет-маркетинг, SEO
    • Поисковая оптимизация
    • Поисковые системы
    • Продвижение и монетизация веб-сайта
    • Сервисы статистики и аналитики
    • Услуги и сервис
    • Покупка и продажа
  • Коммерческие услуги
    • Freelance
    • Работа
    • Услуги и сервис
  • Давайте поговорим о ...
    • Общий
    • Хобби, отдых и развлечение
    • Человек и общество
    • Флейм
  • Наш форум
    • Конкурсы
    • Работа форума

Calendars

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Blogs

There are no results to display.

There are no results to display.

Marker Groups

  • Members
  • Front-end
  • Back-end
  • Education
  • Looking for job
  • Offering job

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


ICQ


Jabber


Skype


From


Interests

Found 11 results

  1. Здравствуйте, не подскажите как с помощью флекс свойства css добиться следующего: На первом изображение показано текущее расположение блоков, блоки не имеют фиксированного размера, а меняются динамически, в зависимости от заполненности контента. Я хочу получить результат как на втором изображении чтобы первый блок растягивался вне зависимости от его заполненности. Я так понимаю нужно использовать для этого свойства flex но все мои попытки сделать так, тщетны. Объясните, можно ли вообще так сделать? (спасибо!) P.S. все изображения прикрепил. P.P.S. это нужно для того чтобы не было такого не красивого выравнивания (position:absolute нельзя использовать, так как размеры могут быть разными) Заметки должны находится на одном уровне
  2. Сайт caddysmellsliketrees.ru, исходники. "Макеты": альбомный, портретный Прошу оценить дизайн и код. На данный момент есть проблемы с отображением на айфонах и в андроидном вебвью, но куда копать, чтобы их решить, я не знаю.
  3. помогите пожалуйста переверстать элементы есть несколько элементов. нужно чтобы на iPad вертикальной ориентации они располагались так: 00 00 00 ,а на iPad горизонтальной ориентации, они располагались так: _00_ 0000 я решил эту задачу, используя flex-элементы и скрытые элементы: jsfiddle page но мне нужно решение, которой использует только возможности flexbox(без костылей в виде скрытых элементов)
  4. помогите пожалуйста установить для каждого элемента .icon высоту, которая равна его ширине. элементу .icon я добавил круглую границу, нужно чтобы при любой ширине экрана кружочки не сплющивались. при этом все эти кружочки должны быть равномерно распределены по высоте экрана результат выглядеть должен приблизительно так: вот моя попытка html: <div class="wrap"> <div class="icons"> <div class="icons_item"><a class="icon" href="">1</a></div> <div class="icons_item"><a class="icon" href="">2</a></div> <div class="icons_item"><a class="icon" href="">3</a></div> <div class="icons_item"><a class="icon" href="">4</a></div> <div class="icons_item"><a class="icon" href="">5</a></div> <div class="icons_item"><a class="icon" href="">6</a></div> </div> </div> css: .wrap{ max-width: 320px; height: 560px; margin: 0 auto; overflow: hidden; background: cyan; } .icons{ display: flex; flex-wrap: wrap; justify-content: space-around; height: 100%; } .icons_item{ width: 50%; height: 33%; background: yellow; } .icon{ border: 2px solid #000; border-radius: 100%; width: 100%; display: block; text-align: center; }
  5. Добрый день, такая проблема: устроился на стажировку в веб студию, сразу дали решить/устранить проблему в их уже существующем проекте. - сайт: http://en.uff.fr - суть проблемы: на главной странице внизу, в диве с классом container, расположены на черном фоне логотипы продуктов(svg картинки). Реализовано всё через display:flex. Во всех браузерах отображение правильное кроме safari. Там поведение картинок такое что у них разные размеры и они как-бы *в куче*. Я гуглил эту проблему на англоязычных источниках и единственным советом был просто префикс -webkit-, но это уже учтено и всё равно правильного отображения мы не добились. Есть какой-то способ решить эту проблему? Заранее спасибо.
  6. Коллеги, помогите, пожалуйста. Задача: чтобы 4 и 5 вставали под 1 и 2, а 6 всегда бы оставался под 3 Спасибо.
  7. Highlander

    Block vs Flex

    Доброго времени суток всем. В процессе обучения и начальной практики верстки созрел вопрос. Вот сверстал я страницу макета на обычных блоках, с флоатами, инлайнами и прочим, работает, адаптивно, вроде нормально. Потом по мере обучения дошел до flex технологий, начал осваивать, переверстал эту же страницах на флексе. И вот по ощущениям как-то проще получилось, меньше кода, более предсказуемо ведут себя блоки, частично встроенная даже без медиа адаптивность и т.д. Поддержка ИЕ с 10 версии, что в принципе терпимо с учетом тенденций к тотальному переходу минимум на вин7 даже лоу лвл сегмента ПК всех видов. Почему очень многие до сих пор верстают блоками обычными? Во всех видео-уроках, на большинстве сайтов-самоучителях, форумах, я вижу в 95% случаев обычную верстку с флоатами. Может есть какие-то подводные камни этой технологии, которые не позволяют ей заменить флоаты? Пока я увидел только плюшки одни, ну и минус с поддержкой старых ИЕ. Просветите и направьте на путь истинных верстальщиков
  8. Вопрос немного странный, но вёрстка разваливается при просмотре сайта на телевизоре 2013 года) Проблема в использовании flex в галерее (например, здесь). При клике на главную картинку открывается большое изображение, но, т. к. flex не работает, всё разъезжается. Браузер определяется как Chrome 22 (естественно, модифицированный). С каких версий flex вообще нормально работает? Или дело в чём-то ещё?
  9. Есть вот такая конструкция.. http://jsfiddle.net/4376rfy8/3/ В IE, Google Chrome и Opera вроде работает, а вот в FireFox текст в левой колонке почему то съезжает вниз, методом тыка выяснил что скорее всего виноват display: table; в родительском контейнере. Но вот обойти этот глюк пока не могу придумать как((( Может кто сталкивался с подобным!? Что нужно в итоге: 1) левая и правая колонка одинаковой высоты с плавующей шириной 2) в правой колонке 4 блока которые центруются(выравниваются) по вертикали, причем верхний блок должен прилипнуть к потолку, а нижний к полу.
  10. Приветствую! Ребят, создавал тут тему недавно насчет одинаковой высоты у блоков, добрый человек посоветовал использовать flex и показал пример(спасибо ему огромное!). Воспользовался я его советом, все хорошо получилось, но такая красота получается только в Chrome, Firefox да Opera, а в Safari нифига. Вот как должно быть: А вот как в Safari: Как видите, продолжение background нет(высота фиксированная, хотя с flex должна была установится высота блока main) да и тени почему-то тоже нет(пропадает, когда увеличиваешь страницу). Вот верстка: <!DOCTYPE html><html lang="ru"><head> <meta charset="UTF-8"> <title>{title}</title> <link href="engine/templates/nn/tmp/css/style.css" rel="stylesheet"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="engine/templates/nn/tmp/js/hint.js"></script> <script type="text/javascript"> if (!('flexWrap' in document.createElement('div').style)) { document.documentElement.className += ' no-flex'; } </script></head><body><div onclick="show('none')" id="wrap"></div><div id="wrapper"> <div id="left">{left}</div> <div id="main">{main}</div> <div id="right">{right}</div></div><footer> <div class="footer_content"> {footer} </div></footer></body></html>Вот CSS: #wrapper { display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; margin: 75px auto 16px; width: 1120px; background-color: #fff; border-radius: 5px; overflow: hidden;}.no-flex #wrapper { display: table; width: 100%; max-width: 1122px;}.no-flex #left,.no-flex #right,.no-flex #main { display: table-cell; vertical-align: top;}#left { width: 235px; float: left;}#right { width: 285px; background-color: #f6f9fa; float: right; flex-shrink: 0;}#main { width: 420px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); float: left; padding: 50px 90px; position: relative;}Буду благодарен за любую помощь!
  11. Господа, есть элементарный сайт визитка, насколько это возможно, на пк все вроде неплохо, без глюков, сделан по принципу mobile first, но на планшете, если нажимать на пункты меню, буквально долисекунды я вижу, как верстка съезжает, это очень напрягает, делал я его флексбоксами, может кто подскажет, что и где и сделал неправильно? Сайт пока находится по адресу anvyd.ru