Поиск по сайту
Результаты поиска по тегам 'flex'.
Найдено 17 результатов
-
Приветствую, не судите пожалуйста строго, я начинающий верстальщик, итак, при вёрстке сайта столкнулся с проблемой, имеется изображение поверх надо наложить пару flex элементов, но ни как не получается, они вытесняют друг друга, margin и background использовать нельзя, изображение обязательно должно быть в теге img а блок контейнер резиновый т.е. без указания абсолютных величин, одним словом должно получиться так как на картинке.
-
Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю. <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><sect
-
Есть контейнер в котором много других контейнеров. Как сделать заполнение друг за другом с переносом в случае если контейнеру не хватает места. (пример на пикче) У меня получается либо контейнер занимает все свободное место по горизонтали, либо по вертикали. Но ни как не друг за другом " одной колонкой"
-
Привет. Друзья, подскажите пожалуйста, как сверстать вот такую сетку на флексах, чтобы блоки нижнего ряда прилипали к блокам верхнего (типа мозаичная верстка). Применил align-items:flex-start, думал что сработает, но нет...
-
Доброго времени суток. Возникла такая проблема, нужно сверстать страницу согласно макету, используя только flex и grid Сразу появилась идея разбить страницу на три divа, первый это блок с породами кота, второй это блок с фотками и третий блок с рейтингом. <body> <header>Бабуленькины котятки</header> <div class="global"> <div class="menu"> <a class="submenu" href="#" id="abis">Абиссинская</a> <a class="submenu" href="#" rel="brit"">Британская</a> <a class="submenu" href="#" rel="
-
Компоновка: типичный блок .Wrapper, который имеет ширину 100% от ширины окна, и центровщик (margin: 0 auto;) с указанными min-width и max-width: В IE следующий баг: Wrapper почему-то заканчивается раньше, чем надо, а центровщик с содержимым перекрывает следующую такую же компоновку ниже: Такой баг был замечен уже практически на свёрстанном лендинге, а потому было очень трудно сделать минимальный работающий пример. Я постарался убрать весь лишний HTML для данного примера, но CSS тоже самое было сделать очень трудно. Если Вы запустите пример в IE (ещё раз повторюсь, что в дру
-
Здравствуйте, не подскажите как с помощью флекс свойства css добиться следующего: На первом изображение показано текущее расположение блоков, блоки не имеют фиксированного размера, а меняются динамически, в зависимости от заполненности контента. Я хочу получить результат как на втором изображении чтобы первый блок растягивался вне зависимости от его заполненности. Я так понимаю нужно использовать для этого свойства flex но все мои попытки сделать так, тщетны. Объясните, можно ли вообще так сделать? (спасибо!) P.S. все изображения прикрепил. P.P.S. это нужно
-
Сайт caddysmellsliketrees.ru, исходники. "Макеты": альбомный, портретный Прошу оценить дизайн и код. На данный момент есть проблемы с отображением на айфонах и в андроидном вебвью, но куда копать, чтобы их решить, я не знаю.
-
помогите пожалуйста переверстать элементы есть несколько элементов. нужно чтобы на iPad вертикальной ориентации они располагались так: 00 00 00 ,а на iPad горизонтальной ориентации, они располагались так: _00_ 0000 я решил эту задачу, используя flex-элементы и скрытые элементы: jsfiddle page но мне нужно решение, которой использует только возможности flexbox(без костылей в виде скрытых элементов)
-
помогите пожалуйста установить для каждого элемента .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&
-
Добрый день, такая проблема: устроился на стажировку в веб студию, сразу дали решить/устранить проблему в их уже существующем проекте. - сайт: http://en.uff.fr - суть проблемы: на главной странице внизу, в диве с классом container, расположены на черном фоне логотипы продуктов(svg картинки). Реализовано всё через display:flex. Во всех браузерах отображение правильное кроме safari. Там поведение картинок такое что у них разные размеры и они как-бы *в куче*. Я гуглил эту проблему на англоязычных источниках и единственным советом был просто префикс -webkit-, но это уже учтено и всё равн
-
Коллеги, помогите, пожалуйста. Задача: чтобы 4 и 5 вставали под 1 и 2, а 6 всегда бы оставался под 3 Спасибо.
-
Доброго времени суток всем. В процессе обучения и начальной практики верстки созрел вопрос. Вот сверстал я страницу макета на обычных блоках, с флоатами, инлайнами и прочим, работает, адаптивно, вроде нормально. Потом по мере обучения дошел до flex технологий, начал осваивать, переверстал эту же страницах на флексе. И вот по ощущениям как-то проще получилось, меньше кода, более предсказуемо ведут себя блоки, частично встроенная даже без медиа адаптивность и т.д. Поддержка ИЕ с 10 версии, что в принципе терпимо с учетом тенденций к тотальному переходу минимум на вин7 даже лоу лвл сегмента ПК вс
-
Вопрос немного странный, но вёрстка разваливается при просмотре сайта на телевизоре 2013 года) Проблема в использовании flex в галерее (например, здесь). При клике на главную картинку открывается большое изображение, но, т. к. flex не работает, всё разъезжается. Браузер определяется как Chrome 22 (естественно, модифицированный). С каких версий flex вообще нормально работает? Или дело в чём-то ещё?
-
Есть вот такая конструкция.. http://jsfiddle.net/4376rfy8/3/ В IE, Google Chrome и Opera вроде работает, а вот в FireFox текст в левой колонке почему то съезжает вниз, методом тыка выяснил что скорее всего виноват display: table; в родительском контейнере. Но вот обойти этот глюк пока не могу придумать как((( Может кто сталкивался с подобным!? Что нужно в итоге: 1) левая и правая колонка одинаковой высоты с плавующей шириной 2) в правой колонке 4 блока которые центруются(выравниваются) по вертикали, причем верхний блок должен прилипнуть к потолку, а нижний к полу.
-
Приветствую! Ребят, создавал тут тему недавно насчет одинаковой высоты у блоков, добрый человек посоветовал использовать flex и показал пример(спасибо ему огромное!). Воспользовался я его советом, все хорошо получилось, но такая красота получается только в Chrome, Firefox да Opera, а в Safari нифига. Вот как должно быть: А вот как в Safari: Как видите, продолжение background нет(высота фиксированная, хотя с flex должна была установится высота блока main) да и тени почему-то тоже нет(пропадает, когда увеличиваешь страницу). Вот верстка: <!DOCTYPE html><html lang="ru">&
-
Господа, есть элементарный сайт визитка, насколько это возможно, на пк все вроде неплохо, без глюков, сделан по принципу mobile first, но на планшете, если нажимать на пункты меню, буквально долисекунды я вижу, как верстка съезжает, это очень напрягает, делал я его флексбоксами, может кто подскажет, что и где и сделал неправильно? Сайт пока находится по адресу anvyd.ru