Цвета html

RGB

Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.

Значения RGB задаются целым числом от 0 до 255. Например, rgb(0,0,255) отображается как синий, так как синий параметр установлен в его самое высокое значение (255), а остальные установлены в 0.

Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).

1. h1 { color: rgb(255, 0, 0); } /* красный */
2. h2 { color: rgb(0, 255, 0); } /* зелёный */
3. h3 { color: rgb(0, 0, 255); } /* синий */
4. h4 { color: rgb(0%, 0%, 100%); } /* тот же синий, процентная запись */

Цветовые значения RGB поддерживаются во всех основных браузерах.

Управление цветом

Правильное воспроизведение цветов, особенно в профессиональной среде, требует управления цветом на всех устройствах, участвующих в производственном процессе, многие из которых используют RGB. Управление цветом приводит к нескольким прозрачным преобразованиям между независимым от устройства и зависящим от устройства цветовым пространством (RGB и другими, например, CMYK для цветной печати) в течение типичного производственного цикла, чтобы обеспечить согласованность цвета на протяжении всего процесса. Наряду с творческой обработкой такое вмешательство в цифровые изображения может повредить точность цветопередачи и детализацию изображения, особенно при уменьшении гаммы . Профессиональные цифровые устройства и программные инструменты позволяют обрабатывать изображения 48 бит на пиксель (16 бит на канал), чтобы минимизировать любой такой ущерб.

ICC-совместимые приложения, такие как Adobe Photoshop , используют цветовое пространство Lab или цветовое пространство CIE 1931 в качестве пространства соединения профиля при преобразовании между цветовыми пространствами.

Какой режим нужно использовать?

Многие дизайнеры по-прежнему предпочитают создавать свои проекты сначала в RGB, а затем конвертировать их в CMYK перед отправкой на ​​печать. Это связано с тем, что RGB поддерживает более широкий диапазон цветов.

Еще одним преимуществом является то, что RGB позволяет работать с файлами меньшего размера. А также, что Photoshop, InDesign и Illustrator базируются на RGB и эта модель поддерживается в web.

Но если в отпечатанной продукции важна точность цвета, то лучше использовать CMYK. Проектирование в этом цветовом режиме позволит получить более четкое представление о готовом продукте.

Если используете цифровой принтер, сохраните файл в формате RGB. Это лучший вариант при печати фотографий. Ели у вас есть файл, который нужно распечатать на офсетном полноцветном принтере, то проведите преобразование в CMYK.

Физические принципы выбора красного, зеленого и синего цветов

Набор основных цветов, таких как основные цвета sRGB , определяет цветовой треугольник ; только цвета внутри этого треугольника могут быть воспроизведены путем смешивания основных цветов. Поэтому цвета вне цветового треугольника показаны здесь серыми. Показаны основные цвета и белая точка D65 sRGB. Фоновый рисунок представляет собой диаграмму цветности CIE xy .

Выбор основных цветов связан с физиологией человеческого глаза ; хорошие первичные цвета — это стимулы, которые максимизируют разницу между ответами колбочек сетчатки человека на свет с разными длинами волн и тем самым образуют большой цветной треугольник .

Три обычных типа светочувствительных фоторецепторных клеток в человеческом глазу (колбочек) больше всего реагируют на желтый (длинноволновый или L), зеленый (средний или M) и фиолетовый (короткий или S) свет (пиковая длина волны около 570 нм. , 540 нм и 440 нм соответственно). Разница в сигналах, полученных от трех типов, позволяет мозгу различать широкий спектр различных цветов, при этом он наиболее чувствителен (в целом) к желтовато-зеленому свету и к различиям между оттенками в области от зеленого к оранжевому.

В качестве примера предположим, что свет оранжевого диапазона длин волн (приблизительно от 577 нм до 597 нм) попадает в глаз и попадает на сетчатку. Свет этих длин волн активирует как средние, так и длинноволновые колбочки сетчатки, но не одинаково — длинноволновые клетки будут реагировать сильнее. Различие в ответах может быть обнаружено мозгом, и это различие лежит в основе нашего восприятия оранжевого цвета. Таким образом, оранжевый вид объекта является результатом того, что свет от объекта попадает в наш глаз и одновременно стимулирует разные колбочки, но в разной степени.

Использование трех основных цветов недостаточно для воспроизведения всех цветов; только цвета в цветовом треугольнике, определяемом цветностью основных цветов, могут быть воспроизведены путем аддитивного смешивания неотрицательных количеств этих цветов света.

И зачем мне это знать?

Вот несколь­ко прак­ти­че­ских примеров: 

• Зная о при­ро­де CMYK, вы все­гда буде­те пони­мать, что вы не смо­же­те напе­ча­тать на прин­те­ре суперяр­кие цве­та. То, что на экране выгля­дит брос­ко и вырвиглаз­но, на бума­ге будет тем­нее и спо­кой­нее. А если бума­га не иде­аль­но белая — то ещё темнее. 
• Гото­вя доку­мен­ты на печать, вы сра­зу сде­ла­е­те их в моде­ли CMYK и смо­же­те про­ве­рить, не будет ли прин­тер под­ме­ши­вать в ваши чёр­ные бук­вы какие-то допол­ни­тель­ные цвета.
• А если нуж­но будет пере­гнать печат­ный макет в веб, вы буде­те пони­мать, что у вас есть запас по ярко­сти и насыщенности. 

Текст:

Миха­ил Полянин

Редак­ту­ра:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев

Аддитивные и субтрактивные цветовые модели

Цветовая модель RGB

Среды, передающие свет (например, телевидение), используют аддитивное смешение цветов с основными цветами — красным , зеленым и синим , каждый из которых стимулирует один из трех типов цветовых рецепторов глаза с минимальной стимуляцией двух других. Это называется цветовым пространством « RGB ». Смеси света этих основных цветов покрывают большую часть цветового пространства человека и, таким образом, создают большую часть цветового восприятия человека. Вот почему цветные телевизоры или цветные компьютерные мониторы должны воспроизводить только смесь красного, зеленого и синего света. См. Добавочный цвет .

В принципе можно использовать и другие основные цвета, но с красным, зеленым и синим может быть захвачена самая большая часть цветового пространства человека . К сожалению, нет точного консенсуса относительно того, какие локусы на диаграмме цветности должны иметь красный, зеленый и синий цвета, поэтому одни и те же значения RGB могут давать немного разные цвета на разных экранах.

Цветовые модели CMY и CMYK

Комбинируя голубой , пурпурный и желтый прозрачные красители / чернила на белой подложке, можно получить широкий диапазон цветов, видимых человеком . Это субтрактивные основные цвета . Часто четвертые чернила, черные , добавляются для улучшения воспроизведения некоторых темных цветов. Это называется цветовым пространством CMY или CMYK.

Голубые чернила поглощают красный свет, но отражают зеленый и синий, пурпурные чернила поглощают зеленый свет, но отражают красный и синий, а желтые чернила поглощают синий свет, но отражают красный и зеленый. Белая подложка отражает проходящий свет обратно к зрителю. Поскольку на практике чернила CMY, подходящие для печати, также отражают немного цвета, что делает невозможным глубокий и нейтральный черный цвет, компонент K (черные чернила), обычно печатаемый в последнюю очередь, необходим для компенсации их недостатков. Использование отдельных черных чернил также является экономически выгодным, когда ожидается большое количество черного содержимого, например, на текстовых носителях, чтобы уменьшить одновременное использование трех цветных чернил. Красители, используемые в традиционных цветных фотопринтах и слайдах , намного более прозрачны, поэтому компонент K обычно не требуется и не используется в этих материалах.

Светодиодные ленты RGB, RGBW и RGBWW

Эти варианты относятся к полихромным, то есть многоцветным и могут светиться разными оттенками. За счет этого обеспечиваются огромные возможности в оформлении помещений и подсветке различных ниш или мебели.

По сути, светодиодная лента – это набор из резисторов и полупроводников, расположенных на печатной плате, которая чаще всего имеет белый цвет для улучшения отражающих свойств.

В первую очередь нужно разобраться, чем отличаются разноцветные ленты от одноцветных, чтобы понять общие принципы работы. В монохромных лентах белое свечение дает люминофор – состав, преобразующий электричество в излучение. Свет у такого варианта мягкий и равномерный. Подсветка создает комфортную для глаз атмосферу.

Выбор оттенков в светодиодных лентах огромен – более 15 миллионов вариантов.

В многоцветных вариантах все оттенки образуются в результате сочетания красного, синего и зеленого цветов (в том числе и белый). Так как в разных лентах применяют различные светодиоды, характеристики которых могут различаться, то получить такой же белый свет, как в монохромном варианте сложно, но в целом он хорошего качества.

Расшифровка

Каждый тип имеет свои особенности, которые несложно узнать по маркировке. Поэтому стоит разобраться в обозначениях, чтобы ориентироваться в теме и подбирать ту разновидность, которая подойдет лучше всего:

1. RGB – самое простое решение, которое появилось первым и используется до сих пор. В нем три цвета R – красный, G – зеленый и B – синий. Полноцветная система, которая состоит из трех монохромных каналов, подключаемых независимо друг от друга, что обеспечивает широкие настройки и большое количество возможных оттенков.
2. RGBW – усовершенствованная лента, в которой к трем стандартным цветам добавлен холодный белый (White) с цветовой температурой в 6000 К. Если сравнивать RGB и RGBW разница в одном диоде, но за счет него количество оттенков становится еще больше, также при необходимости можно включить чистый белый свет.
3. Что значит RGBWW. Тут есть еще один белый светодиод, но в отличие от первого он имеет теплый белый свет с температурой 2700-2900 К.

Дополнительные элементы позволяют получить новые оттенки, которые невозможно настроить на стандартной ленте.

Цвета в дизайне веб-страниц

Цветовая модель RGB для HTML была официально принята в качестве стандарта Интернета в HTML 3.2, хотя до этого использовалась некоторое время. Первоначально ограниченная глубина цвета большинства видеооборудования привела к ограниченной цветовой палитре из 216 цветов RGB, определенной цветным кубом Netscape. С преобладанием 24-битных дисплеев использование полных 16,7 миллионов цветов цветового кода HTML RGB больше не создает проблем для большинства зрителей.

Веб-безопасной цветовой палитры состоит из 216 (6 3 ) комбинации красного, зеленого и синего цветов , где каждый цвет может принимать одно из шести значений (в шестнадцатеричном формате ): # 00, # 33, # 66, # 99, #CC или #FF (в зависимости от диапазона от 0 до 255 для каждого значения, описанного выше). Эти шестнадцатеричные значения = 0, 51, 102, 153, 204, 255 в десятичном формате, что = 0%, 20%, 40%, 60%, 80%, 100% с точки зрения интенсивности. Это кажется подходящим для разделения 216 цветов в куб размерности 6. Однако без гамма-коррекции воспринимаемая интенсивность на стандартном 2,5 гамма ЭЛТ / ЖКД составляет всего: 0%, 2%, 10%, 28%, 57%, 100%. См. Фактическую палитру веб-безопасных цветов для визуального подтверждения того, что большинство получаемых цветов очень темные.

Синтаксис в CSS :

rgb(#,#,#)

где # равно пропорции красного, зеленого и синего соответственно. Этот синтаксис можно использовать после таких селекторов, как «background-color:» или (для текста) «color:».

Цветовая модель rgb это аддитивная модель!

Аддитивные цвета создаются с помощью метода, который сочетает в себе множество разных оттенков. Красный, зеленый и синий – главные цвета, которые используются в аддитивной модели. Комбинации двух из этих цветов создают дополнительный цвет: голубой, пурпурный или желтый.

Изображения в RGB вы часто видите на экранах телевизоров и мониторах компьютеров. Этот режим может использоваться только устройствами, генерирующими свет. Изображение, выполненное в RGB, подходит для печати только на цифровом принтере.

Если вы хотите, чтобы макет был напечатан профессионально, придется изменить цветовой режим на CMYK.

Мощность RGB светодиодной ленты

RGB светодиодные ленты могут быть достаточно яркими для достижения необходимого светового эффекта, но конкурировать с монохромными LED лентами они все же не могут. Указываемая мощность RGB ленты может быть получена только при включении сразу всех цветов на полную мощность, т.е. при включении сразу всех трех каналов цветов: красного, зеленого и синего. При включении одного канала мощность будет примерно в три раза меньше.

Если сравнивать SMD RGB 5050 светодиод с таким же монохромным светодиодом, то с применением последнего получится более яркая лента конкретного цвета за счет большей мощности кристалла.

Оттенки серого

Серые цвета отображаются с использованием одинакового количества энергии для всех источников света.

Чтобы сделать его легким для вас, чтобы выбрать серый цвет мы составили таблицу серых оттенков для вас:

Gray Shades	HEX	RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#696969	rgb(105,105,105)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
HTML Gray	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
HTML DarkGray !!!	#A9A9A9	rgb(169,169,169)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
X11 Gray	#BEBEBE	rgb(190,190,190)
HTML Silver	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
HTML LightGray	#D3D3D3	rgb(211,211,211)
	#D8D8D8	rgb(216,216,216)
HTML Gainsboro	#DCDCDC	rgb(220,220,220)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
HTML WhiteSmoke	#F5F5F5	rgb(245,245,245)
	#F8F8F8	rgb(248,248,248)
HTML White	#FFFFFF	rgb(255,255,255)

An anomaly in the table above is that HTML Gray is darker than DarkGray.

The color names of HTML / CSS was inherited from the X11 standard.

HTML / CSS defined gray at the midpoint of the 8-bit gray scale (128,128,128).

X11 defined gray to be (190,190,190); which is closer to HTML silver.

Числовое представление цвета

Как уже было сказано ранее, RGB цвета формируются путем смешивания основных. Для описания интенсивности каждого из них приняли схему, в которой цвет представляется диапазоном 0-255 (8 бит), что в шестнадцатеричной системе исчисления соответствует 00-FF.

То есть, основные цвета будут иметь следующий вид:

• Красный – RGB(255,0,0);
• Зеленый – RGB(0,255,0);
• Синий – RGB(0,0,255);

Если же интенсивность цвета принимает значения меньше 255, то получаются различные оттенки красного, зеленого и синего. Далее приведена таблица их градации, а также представлены шестнадцатеричные значения каждого из оттенков:

Таблицы цветов RGB

Естественно, что кроме градаций основных цветов, существуют смешанные, и их количество довольно велико. Поэтому была создана таблица RGB-цветов, в которой представлены все существующие оттенки, а также приведены их названия и числовые представления (в десятичной и шестнадцатеричной форме).

Ознакомиться с ней можно здесь. Данная таблица здорово облегчает жизнь веб-дизайнерам, так как за несколько секунд можно найти необходимый оттенок и узнать его числовое представление.

Безопасная палитра RGB цветов

Однако в какой-то момент существовала проблема отображения цветов в различных браузерах, и для ее решения была скомпонована так называемая «безопасная» палитра RGB цветов, которые были выведены математическими вычислениями.

Когда браузер не может корректно отобразить цвет, он делает попытки получить близкий к необходимому путем смешивания соседних цветов, и скорее всего результат будет совершенно неприемлем:

Используя коды цветов RGB из данной палитры, веб-разработчик может не бояться за отображение цветов на страницах своего сайта при просмотре с помощью различных браузеров, на различных платформах и мониторах. Хотя на данный момент таблица безопасных цветов теряет свою актуальность (технический прогресс все же не стоит на месте), при ее использовании можно, что называется, спать спокойно.

Золотой цвет в RGB модели

Впервые слово «золотой», было использовано в начале XIV века для описания цвета химического элемента под названием Aurum – золото. В модели RGB золотой цвет представлен следующими числовыми значениями:

• RGB (255, 215, 0) – десятеричная система;
• HEX #FFD700 – шестнадцатеричная система.

Бежевый цвет в RGB модели

Бежевый цвет занимает довольно значимое место в истории, пусть он и не самый выразительный. Многие памятники культуры, особенно античные скульптуры, были изготовлены из стеатита и мыльного камня, обладающих бежевым оттенком. В модели RGB бежевый цвет имеет следующие числовые представления:

• RGB (245, 245, 220) – десятеричная система;
• HEX #F5F5DC – шестнадцатеричная система.

скучный

Геометрическое представление

Цветовая модель RGB, сопоставленная с кубом. Горизонтальная ось X показывает, как красные значения увеличиваются влево, ось Y показывает, как синий увеличивается вправо, а вертикальная ось Z показывает, как зеленый цвет увеличивается кверху. Начало координат, черный — это вершина, скрытая от глаз.

См. Также цветовое пространство RGB

Поскольку цвета обычно определяются тремя компонентами не только в модели RGB, но и в других цветовых моделях, таких как CIELAB и Y’UV , среди прочих, то трехмерный объем описывается путем обработки значений компонентов как обычных декартовых координат. в евклидовом пространстве . Для модели RGB это представлено кубом, использующим неотрицательные значения в диапазоне 0–1, с назначением черного цвета исходной точке в вершине (0, 0, 0) и с увеличивающимися значениями интенсивности, проходящими по трем осям вверх. до белого в вершине (1, 1, 1), по диагонали напротив черного.

Триплет RGB ( r , g , b ) представляет трехмерную координату точки данного цвета внутри куба или его граней или вдоль его краев. Этот подход позволяет вычислять цветовое сходство двух заданных цветов RGB, просто вычисляя расстояние между ними: чем короче расстояние, тем выше сходство. Out-of цветовой гаммы вычисления также могут быть выполнены таким образом.

Сервисы подбора цветовых схем для сайта

Различных инструментов создания палитры существует много; мы выбрали десятку самых популярных, среди которых сервисы и для начинающих дизайнеров, и для профессионалов.

Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.

Сервис Adobe Color CC

Colormind — продвинутый сервис для создания цветовой схемы для сайта. Онлайн-инструмент не только генерирует палитру, но и позволяет очень тонко настраивать каждый из оттенков, а также составляет подборку цветов на основе загруженного изображения.

Сервис Colormind

Colors — бесплатный генератор цветовой палитры, за считанные секунды создает хорошие варианты. Если предложенная системой подборка вам не нравится, то можно сгенерировать новую или задать определенные цвета и заменить какие-то оттенки.

Сервис Colors

Color Safe — этот инструмент понравится тем, кому небезразлична аббревиатура WCAG (Руководство по обеспечению доступности веб-контента, в которое входит множество рекомендаций, помогающих сделать информацию на сайте доступной разным пользователям — например, когда нужно учесть особенности восприятия слабовидящих людей). В алгоритм подборщика встроены необходимые параметры, что удобно при работе над сайтами.

Сервис Color Safe

 — сервис специально был создан в помощь дизайнерам пользовательских интерфейсов. Главная особенность в том, что выбранную цветовую палитру можно сразу применить к схеме веб-страницы и оценить, насколько удачным получится результат.

Сервис

Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.

Сервис Paletton

Colordot — сервис для тех, кто не привык проводить часы в поисках идеального цвета и готов довериться интуиции. Подбор оттенка осуществляется, пока вы водите мышкой по экрану: стоит кликнуть, и система запомнит цвет и предложит выбрать следующий.

Сервис Colordot

Colourcode — во многом сервис похож на Colordot, но с более гибкими настройками и возможностью выбрать комбинацию оттенков по триадным, монохромным, аналоговым и другим стилям цвета.

Сервис Colourcode

Material Design Palette предлагает выбрать два основных оттенка для цветовой схемы для сайта, а потом показывает, как сочетание будет выглядеть на странице. Кроме того, сервис сразу же предлагает более расширенную палитру.

Сервис Material Design Palette

Palettr — очень необычный сервис, который наверняка оценят творческие натуры. В отличие от всех рассмотренных нами инструментов, этот предлагает создавать палитру не на основе цветов, а на основе места или явления. Просто вбейте в строку поиска какое-нибудь слово и увидите, что получится.

Отличие светодиодной ленты RGB от обычной LED ленты

Отличие светодиодной лент RGB от обычной LED ленты сразу видно еще из названия. В обычных LED лентах применяются монохромные светодиоды, для подключения которых нужно только два контакта. В RGB лентах устанавливают многоцветные RGB светодиоды, которые в одном корпусе содержат сразу три кристалла, отвечающие за три разных цвета: красный, синий и зеленый (red, green, blue). Подключается такая лента с помощью четырех контактов, где три из них управляют конкретным каналом цвета и один контакт общий.

Такая лента позволяет получить любой цвет и оттенок регулировкой яркости каналов из трех основных цветов.

ColorExplorer

ColorExplorer – многофункциональный ресурс с большими возможностями работы с цветом. Он был разработан специально для профессиональных дизайнеров. Набор инструментов данного ресурса позволяет не только подбирать цвета и составлять цветовые палитры, но и изучать популярные библиотеки цветов, объединять библиотеки, экспортировать палитры в такие программы, как Adobe Photoshop, Illustrator, InDesign и др.

Для того чтобы получить цветовую тему понравившегося изображения, следует загрузить его через вкладку Image Color Import. Вы увидите все цвета и оттенки (от 3 до 50), имеющиеся на данном изображении.

Очень интересно работать во вкладке Color Matching – это цветовой блендер, позволяющий изменять компоненты цвета с помощью значений RGBи HSL. Подобрав необходимую цветовую палитру, вы можете добавить её к уже существующей, либо сделать замену, ну, и как вариант, сохранить в своих палитрах My Palettes.

Применение RGB светодиодной ленты

RGB светодиодные ленты могут применяться также широко, как и обычные LED ленты. Их могут применять для наружной рекламы, для подсветки мебели и автомобильного тюнинга, но больше всего RGB светодиодные ленты применяют для дизайна помещений.

Гибкий контроль за светом RGB лент позволяет добиться таких эффектов при освещении квартир и прочих помещений, которых никак не удастся достичь другими способами подсветки. Она с легкостью принесет разнообразие в жизнь простым изменением подсветки. К примеру, яркий белый свет сделает из помещения рабочий кабинет, легкая голубая подсветка идеально подойдет в качестве ночного света, а зеленая подсветка поможет достичь лучшей расслабленности и отдыха. Причем все это можно сделать с одним помещением буквально за несколько секунд.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive