Когда ты HR от Бога
А что дальше то?
Доброго времени суток.
Начнем с того что я из разряда "тыжпрограммист" то есть в программировании я бум бум но с железом да и вообще с техникой на одной волне. Одного присутствия иногда хватает, дабы техника излечилась от недуга моей святой и чистой аурой. И вот значит лег я такой почитать новые главы "Forgotten Conqueror" а в голове зарождается идея. Дочитав я упорно начал шерстить просторы интернета с телефона, дабы найти, что то похожее\подобное моей малееенькой идейки, но забросил это пагубное действо, ибо телефон для моих больших пальцев не самое удобное устройство. Перебравшись за комп, я продолжил искать, пролистав много всяких сайтов, я так и не смог ничего найти. Обрадовавшись мысли "вау могу создать что то новенькое" посадил своего мопса на колени положил руки на клаву и.... И я впал в ступор, а Что собственно дальше? Вот прям, что вообще дальше то делать?
5 Flexbox методов, о которых вы должны знать
Flexbox является стандартом CSS, оптимизированным для проектирования пользовательских интерфейсов. Используя различные свойства Flexbox мы можем построить нашу страницу из небольших блоков, которые затем с легкостью сможем перемещать и изменять размеры, как нам угодно. Адаптивные веб-сайты и приложения пользуются огромным спросом в нынешней веб-индустрии.
В этой статье я хочу показать вам пять flexbox методов к решению проблем компоновки при верстке. Также я приведу практические примеры для демонстрации, в которых применяются эти методы.
1. Создание столбцов с одинаковой высотой
На первых порах, это может показаться не трудной задачей, но делать столбцы, которые имеют одинаковую высоту, иногда бывает сделать очень «геморройно». min-height в данном случае использовать будет не практично, так как с увеличением количества контента, находящегося в блоке, так же будет и увеличиваться его длина.
Flexbox не видит в этом проблемы. Все, что нам нужно, так это инициализировать гибкую модель. Обязательно убедитесь, что flex-direction и align-items имеют значения «по умолчанию».
div class="container">
.container{
display: flex;
flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/
align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/
}
2. Изменение порядка
Некоторое время назад, если бы мне пришлось динамически изменять порядок некоторых элементов, я, вероятно, попробовал бы некоторые CSS хаки, но потом бросили бы эту затею и в расстройстве сделали бы это с помощью javascript. С flexbox же эта задача сводится всего к применению всего лишь одного свойства СSS.
Это свойство называется order. Оно позволяет мне менять любое количество flex элементов и изменять их последовательность, в которой они появятся на экране. Этот параметр представляет собой целое число, определяющее положение элемента — более низкие числа означают больший приоритет.
<div class="blue">...</div>
<div class="red">...</div>
<div class="green">...</div>
.conteiner{display: flex;}
/*Обратный порядок элементов*/
.blue{order: 3;}
.red{order: 2;}
.green{order: 1;}
3.Горизонтальное и вертикальное центрирование
Вертикальное центрирование в CSS является одной из тех проблем, которые заставляют нас спросить себя: Как такую тривиальную вещь до сих пор так сложно сделать? И это на самом деле так. Если посмотреть в Google вертикальное центрирование CSS, то в результате поиска выскочит бесконечное количество различных методов, большинство из которых будут включать в себя таблицы и преобразования. которые предназначены для изготовления макета.
Flexbox предлагает более простое решение этой проблемы. Каждый гибкий макет имеет два направления на оси (X,Y) и два отдельных свойства для их выравнивания. Мы можем позиционировать любой элемент прямо в середине родительского контейнера.
<div>...</div>
.container{
display: flex;
justify-content: center; /*Центр по главной оси*/
align-items: center; /*Центр по вспомогательной оси*/
}
4. Создание полностью отзывчивой сетки (Responsive Grids)
Большинство разработчиков полагаются на готовые CSS фреймворки при создании адаптивных сайтов. Bootstrap является наиболее популярным, но есть и сотни других фреймворков, которые помогут вам справиться с этой задачей. Как правило, они хорошо работают и имеют множество опций, но имеют тенденцию быть довольно тяжелыми. Если вы все хотите сделать своими руками и вам не нужных громоздких фреймвокров, тогда Flexbox именно для вас!
Строка flexbox сетки представляет собой простой контейнер с display: block;. Внутри горизонтального столбца может быть любое количество элементов, размер которого устанавливается с помощью Flex. Гибкая модель адаптируется под размер окна браузера, так что эта схема должна отлично выглядеть на всех устройствах. Тем не менее, если все таки не хватит места на экране по горизонтали, то мы сможем решить эту проблему с помощью медиа-запроса.
<div class="col-1">...</div>
<div class="col-2">...</div>
<div class="col-1">...</div>
.container{display: flex;}
.col-1{flex: 1;}
.col-2{flex: 2;}
@media (max-width: 800px){
.container{
flex-direction: column;
}
}
5. Создание идеального Sticky Footer (прилипающий футер)
Flexbox имеет простое решение этой проблемы. Применение display: flex; к тегу body позволяет построить весь наш макет страницы, на основе свойств Flex. Да чего я все говорю, да говорю? Давайте уже лучше посмотрим на практике.
<div class="main">...</div>
<footer>...</footer>
html{height: 100%;}
body{
display: flex;
flex-direction: column;
height: 100%;
}
.main{
/*Основной раздел будет занимать все свободное место на странице*/
flex: 1 0 auto;
}
footer{
/*Футер будет занимать столько места по вертикали, сколько и должен и не пикселя больше */
flex: 0 0 auto;
}
Вывод
Все браузеры (кроме IE 9) теперь поддерживают режим Flexbox. Если вы не использовали Flexbox до этого момента, то я рекомендуем Вам попробовать.
Надеюсь, что мои советы CSS были для вас полезны и что они помогут вам создавать более качественные и более адаптивные макеты.
Жду ваших комментариев по этому поводу.
Вы так же можете читать мои статьи здесь
Как я искала сотрудника
Вот все все время пишут посты о том, как искали работу, и как их облапошивали в этом процессе.
А меня вот мучает обратная проблема: как найти хорошего сотрудника. Ищу я джуниора верстальщика, готовы мы ему всему учить, деньги (пусть и не гигантские) платить, помогать, даем в общем-то нежесткий график и возможность работать удаленно.
Требований мало: базовые знания HTML-верстки, ответственность (чтобы не проебывал дедлайны), способность в рабочие часы офиса быть на связи (ну чтобы ответить, когда будет доделана страница и что сделан по задаче). А, еще одно, самое суперское требование: нужен одессит.
Нет, ну в принципе не одессит нас тоже устроил бы, но я люблю Одессу, у нас в Одессе сидит синиор, и ему нужен помощник - зачем нам дробить города. Да и вообще, специфическое одесское чувство юмора очень помогает в работе, и радует меня весьма.
Иииии, вот теперь начинается самая веселуха.
Чего я только не наслушалась от соискателей в процессе обсуждения.
Половина не знает вообще что такое CSS, второй половине не известны названия банальных тегов. Часть просто пишет с дичайшими орфографическими ошибками, так что страшно подумать, как потом эти люди будут писать код? С дечащиими, я те грю, дечащеми!
Самое прекрасное - это отмазы, когда человек получает тестовое задание (присылаем простейшую страничку на сверстать с адаптивом), и понимает, что не осилит его выполнить.
- У меня ноутбук не открывает фотошоп (это самое логичное в общем-то было, но кааак, Карл!? Как ты планировал заниматься версткой?!);
- Мне запретил брат!
- Я боюсь незнакомых слов (да блин, они для тебя должны быть знакомыми, это ж теги, але!);
- Я готов работать только ночью, а днем я сплю, мне звонить нельзя (ох, где мой осиновый кол, вампиры в городе).
И так далее, и тому подобное. Сижу наслаждаюсь. Продолжаю искать хоть одного рукастого адеквата)
Все мое, кроме картинки, картинка просто постоянно в голову лезет.
Вот как шутят верстальщики
На 1 апреля на сайте авто.ру верстальщики добавили рандомные гифки при предпросмотре фото автомобиля, решил сохранить несколько интересных гифок, зашел в код и что я там увидел...
ШОК
В Питере шаверма и мосты, в Казани эчпочмаки и казан. А что в других городах?
Мы постарались сделать каждый город, с которого начинается еженедельный заед в нашей новой игре, по-настоящему уникальным. Оценить можно на странице совместной игры Torero и Пикабу.
Реклама АО «Кордиант», ИНН 7601001509