# data[].attributes.attachment_link.readable_text
Try it Yourself "

CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage

Inline, for text

Table, for two-dimensional table data

Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Browser Support

The flexbox properties are supported in all modern browsers.

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

The element above represents a flex container (the blue area) with three flex items.

Parent Element (Container)

The flex container becomes flexible by setting the display property to flex:

Example

.flex-container {
display: flex;
}

The flex container properties are:

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the flex-wrap property.

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

The justify-content Property

The justify-content property is used to align the flex items:

The align-items Property

The align-items property is used to align the flex items.

In these examples we use a 200 pixels high container, to better demonstrate the align-items property.

Example

The baseline value aligns the flex items such as their baselines aligns:

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

Try it Yourself "

The align-content Property

The align-content property is used to align the flex lines.

In these examples we use a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property.

Perfect Centering

In the following example we will solve a very common style problem: perfect centering.

SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

Example

Try it Yourself "

Child Elements (Items)

The direct child elements of a flex container automatically becomes flexible (flex) items.

The element above represents four blue flex items inside a grey flex container.

The flex item properties are:

The order Property

The order property specifies the order of the flex items.

The first flex item in the code does not have to appear as the first item in the layout.

The order value must be a number, default value is 0.

The flex-grow Property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

The value must be a number, default value is 0.

Example

Make the third flex item grow eight times faster than the other flex items:

Try it Yourself "

The flex-shrink Property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

The value must be a number, default value is 1.

Example

Do not let the third flex item shrink as much as the other flex items:

Try it Yourself "

The flex-basis Property

The flex-basis property specifies the initial length of a flex item.

The flex Property

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

The align-self Property

The align-self property specifies the alignment for the selected item inside the flexible container.

The align-self property overrides the default alignment set by the container's align-items property.

In these examples we use a 200 pixels high container, to better demonstrate the align-self property:

Responsive Image Gallery using Flexbox

Use flexbox to create a responsive image gallery that varies between four, two or full-width images, depending on screen size:

Try it Yourself "

Responsive Website using Flexbox

Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:

Try it Yourself "

CSS Flexbox Properties

The following table lists the CSS properties used with flexbox:

# data[].attributes.attachment_link.description
Try it Yourself " Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit position of an element The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

# data[].attributes.body
urok16

# data[].attributes.body
urok16

# data[].attributes.headline
css - 14 урок упражнение

# data[].attributes.subject
css - 14 урок упражнение

# data[].attributes.body
Златно сечение

# data[].attributes.headline
Златно сечение

# data[].attributes.subject
Златно сечение

# data[].attributes.attachment_link.title
структура на страница златното сечение и текст

# data[].attributes.headline
зад 5 изображения

# data[].attributes.subject
зад 5 изображения

# data[].attributes.body
урок 11

# data[].attributes.body
Urok 6

# data[].attributes.headline
графичен модел Figma

# data[].attributes.subject
графичен модел Figma

# data[].attributes.attachment_link.title
Работа с платформата FIGMA за създване на графичен модел на страница

# data[].attributes.headline
Онлайн редактор 

# data[].attributes.subject
Онлайн редактор 

# data[].attributes.attachment_link.description
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

# data[].attributes.headline
Иван Вазов - Блокове

# data[].attributes.subject
Иван Вазов - Блокове

# data[].attributes.headline
Задача - Иван Вазов- с блокове

# data[].attributes.subject
Задача - Иван Вазов- с блокове

# data[].attributes.headline
Иван Вазов - текст

# data[].attributes.subject
Иван Вазов - текст

# data[].attributes.body
16. Изграждане на уеб страница и уеб сайт на базата на графичен модел

# data[].attributes.headline
14.2. Видове селектори в CSS

# data[].attributes.subject
14.2. Видове селектори в CSS

# data[].attributes.body
Разгледайте CSS и HTML кода

# data[].attributes.headline
Как се справихте този час?

# data[].attributes.subject
Как се справихте този час?

# data[].attributes.body
1). Запишете името на селектора – в CSS;

2). Така дефинираното правило за клас използвайте в HTML документа- задайте атрибут class (клас) на елемент p;

3). Добавете правилото: #red {background-color: red;}

и атрибут id="red" в елемент р.

# data[].attributes.body
Разгледайте CSS и HTML кода

# data[].attributes.headline
Зад.Смяна цвета на всички заглавия на забележителности в стр. pois.html,като използвате файл  styles.css

# data[].attributes.subject
Зад.Смяна цвета на всички заглавия на забележителности в стр. pois.html,като използвате файл  styles.css

# data[].attributes.headline
14. Визуално оформяне на уеб страница с използване на CSS

# data[].attributes.subject
14. Визуално оформяне на уеб страница с използване на CSS

# data[].attributes.body
<center><iframe width="640" height="360" src="https://www.youtube.com/embed/tjzv49ILQBI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>

# data[].attributes.body
https://yakkyofy.com/blog/importing-from-china-en/how-to-create-your-own-brand-with-chinese-products/

# data[].attributes.attachment_caption
Самост.работа - Сайт за Иван Вазов

# data[].attributes.body
https://www.youtube.com/embed/tjzv49ILQBI

# data[].attributes.body
Отворете в редактора Notepad++  файла events.html

Като спазвате основните изисквания за структурата на един HTML документ, добавете таговете:

<head>, <title>, <body>

Заглавието и съдържанието на документа вземете от файла struktura.docx

Запишете файла и проверете какъв е резултатът, като го отворите в браузъра.

# data[].attributes.headline
структура Урок 10

# data[].attributes.subject
структура Урок 10

# data[].attributes.headline
онлайн инструмент за цветова схема за графичния модел, схематичен дизайн

# data[].attributes.subject
онлайн инструмент за цветова схема за графичния модел, схематичен дизайн

# data[].attributes.body
https://www.sessions.edu/color-calculator/

https://app.uizard.io/

# data[].attributes.attachment_link.description
Design digital products, mobile apps, website mockups, and wireframes in minutes with Uizard, the world's first AI-powered design tool! Sign up today.

# data[].attributes.body
Urok 4 Упражнение

# data[].attributes.attachment_link.readable_text
1. Pick a Color.

Click the first field to open the color picker and slide to select your desired hue (such as red, violet, or blue). Drag the dot right and left to adjust saturation or up and down to adjust value.

If you know the hexadecimal, RGB, or CMYK values for your base color enter them in the fields. Click plus to add up to three base colors

2. Choose a Harmony.

Choose one of six color combinations to work with your starting color. Click the color harmony symbol to complete the color scheme.

3. See Results.

The colors making up your harmony will display in the color calculator swatches and on the interactive color wheel.

Tweak or explore these choices by selecting and comparing different harmonies, viewing the same harmony with different colors, adjusting saturation or value, or adding additional input colors. Clear All to start over.

Like what you're seeing? Create Color Scheme to see a color report-and save the hexadecimal, RGB, and CMYK colors for your Web or print projects.

See your swatch applied to design samples. Print the page, save it as a PDF, share it with friends and family. It's a colorful world.

What is the Color Wheel?

The color wheel is a chart representing the relationships between colors. Based on a circle showing the colors of the spectrum originally fashioned by Sir Isaac Newton in 1666, the colour wheel he created serves many purposes today. Painters use it to identify colors to mix and designers use it to choose colors that go well together.

The classic color wheel shows hues arranged in a circle, connected by lines or shapes. The colors include primary colors (red, yellow, and blue), secondary colors (orange, green, and violet), and tertiary colors (yellow green, blue green, blue violet, red violet, red orange, and yellow orange).Secondary colors are created by mixing primary colors. For example, mixing red and yellow creates orange; mixing yellow and blue creates green.

NOD Newsletter

Want to see more design resources, tips, and news sent to your inbox? Subscribe to our Notes on Design Newsletter, a Sessions College blog dedicated to art and design.

Developing a Color Scheme

Designers often start a project by developing a color scheme: a set of colors that will work well together for the client or task at hand. Though you'll sometimes start from scratch, generally you'll begin with one or two base colors around with other colors will be built.

Color Harmony Basics How to choose colors that really work? Use the color wheel (or our color calculator) to help you identify harmonious color combinations. The following color harmonies are based on geometric relationships on the color wheel. For this reason, we can represent them as shapes. Rotate these shapes around the central point of the color wheel to create limitless color combinations.

Choosing the Right Colors Choosing the right colors for you requires a lot of creativity and experimentation. Bear in mind that color is very psychological and different color harmonies produce different effects. For example, analogous colors are similar in hue, creating a smooth transition from one color to the next. Complementary colors are opposite to each other on the color wheel, so they create a strong contrast. Monochromatic color schemes can be subtle and sophisticated.

Experiment with different harmonies to achieve the desired mood or effect.

Adjusting Color Value and Saturation Once you've selected your colors, you may wish to adjust the value of a specific color or colors-how light or dark the color is. Or you may wish to adjust its saturation, how rich it is. Each hue on the online color wheel has a different inherent value. Yellow, for example, is lighter than blue.

To increase contrast in your color scheme, you may need to adjust the value of a specific color-by making a yellow darker or lighter, say. Or perhaps adjust the saturation to vary the intensity. You can do both using the color calculator.

# data[].attributes.attachment_link.title
Color Wheel - Color Calculator | Sessions College

# data[].attributes.attachment_link.description
Use the color wheel to find the perfect color scheme with the Sessions College color calculator. Endless free color combinations, working from any base color.

# data[].attributes.headline
за портфолио

# data[].attributes.subject
за портфолио

# data[].attributes.body
Персонализирайте началната страница за себе си.

# data[].attributes.headline
Задача 1 Даден е следния HTML код:

# data[].attributes.subject
Задача 1 Даден е следния HTML код:

# data[].attributes.body
<html>

<head>

<link rel='stylesheet' type='text/css' href='css1.css'>

<title>CSS example 1</title>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<p>Text</p>

</body>

</html>

Съставете файла css1.css, чрез който всеки един от Heading1 до Heading4 да има различно оформление както следва:

1. Heading1 - главни букви, курсивен шрифт

2. Heading2 – подчертани, червени букви

3. Heading3 - малки букви, разстояние между буквите 5px

4. Heading4 – зачертан, подравнен в центъра

Съхранете двата файла, съответно zad1.html и css1.css и ги изпратете

# data[].attributes.headline
Моето лично портфолио

# data[].attributes.subject
Моето лично портфолио

# data[].attributes.headline
Биография и изображения на авторите

# data[].attributes.subject
Биография и изображения на авторите

# data[].attributes.body
Изтеглете изображенията и копирайте текста. Цитирайте източника чрез хипервръзка.

https://zamatura.eu/12klas/maturi-12klas/predmeti/bel/avtori/ivan-vazov/

# data[].attributes.attachment_link.title
Иван Вазов - Биография и Творчество - zamatura.eu

# data[].attributes.attachment_link.description
Иван Вазов е роден на 27.06.1850 г. в гр. Сопот. Учи в родния си град, в Калофер и в Пловдив. Авторът е включен в матурата по БЕЛ след 12 клас.

# data[].attributes.headline
Български автори. Биографични бележки

# data[].attributes.subject
Български автори. Биографични бележки

# data[].attributes.body
Ще създадем уеб сайт с помощта на езика HTML, състоящ се от няколко свързани страници на тема „Български автори. Биографични бележки“.

# data[].attributes.headline
Изображение за pois.html

# data[].attributes.subject
Изображение за pois.html

# data[].attributes.body
Modul3 Video

# data[].attributes.attachment_link.title
Информационни технологии

# data[].attributes.attachment_link.description
За удобство при сваляне, в края на всеки клас има zip архив с всички файлове

# data[].attributes.body
pois.html

# data[].attributes.headline
Задача 3 - Урок12 

# data[].attributes.subject
Задача 3 - Урок12 

# data[].attributes.body
Отворете файла index.html от папката "Site".

Потърсете таг <div id="video"> и вътре добавете видеофайла "rosa.mp4" от подпапката "video".

- Използвайте атрибута poster за указване на начално изображение на видеоелемента, като използвате файла "poster.png" от папката на видеото.

- Изпробвайте различни стойности за атрибута width, например 600. Какви пътища ще зададете? Запишете файла и го изпробвайте.

# data[].attributes.body
Отворете файла pois.html от папката "Site".

Преобразувайте последните два параграфа от текста за първия обект (<div id="1">) в неподреден списък.

Запишете файла и го проверете

# data[].attributes.body
events.html

# data[].attributes.body
Отворете файла events.html.

B него създайте таблица в подходящия блок (div), като използвате данните от файла "Site\Resources\Karlovo_tablitsa.docx".

За целта може да създадете първо един празен ред (<tr>) c 2 колони (<td>), като след това го размножите, за да получите нужните редове.

Запишете файла и го проверете.

# data[].attributes.body
Отворете файла pois.html .
 Като използвате таг за изображение , добавете изображение за Исторически музей Карлово от подпапка " history_museum"
 Какъв път ще използвате?
 След като добавихте изображението , ще видите, че то е много голямо.
 За да зададем с какъв размер да се показва на страницата , трябва да зададем стойност на атрибутите height и width в тага <img >.
 Най добре е да се задават и двата атрибута, но съществува опасност , ако не са спазени пропорциите на зададените и истинските размери ,nизображението да е сплескано .
 Затова задайте само height ="300", запишете файла и проверете резултата в браузъра .
 Вместо height задайте width и пак проверете резултата

# data[].attributes.body
Отворете файла pois.html от папката Site " от приложените материали
 Потърсете в него текста « виж на картата » и като използвате тага <а> и атрибута href , направете от текста връзка към сайта maps.google.bg с реалното местоположение на музея.
З а целта ще ви трябва URL адреса на картата с местоположението на обекта
Влезте в maps.google.bg и потърсете музея с подходящи ключови думи .
След като го намерите, използвайте иконата Share , за да вземете линк към картата (или готов линк от файла
link.txt " в същата папка).
Запишете файла и изпробвайте резултата .
Ако не сте използвали и атрибута target , виждате ,
че картата се отваря на мястото на отворената страница.
 По добре е да се отваря в нов прозорец .
За целта използвайте атрибута target със стойност "_blank"

# data[].attributes.body
Вземете текста за Исторически музей
Карлово от файла "history_museum.docx " и като
използвате тага за параграф , го поставете в
предвидено то за това място (в div с id =2)
 Оформете текста в 1 параграф (както е
показан в документа).
 За нови редове използвайте тага <br>

# data[].attributes.body
Основи на HTML

# data[].attributes.headline
Условие на задачата

# data[].attributes.subject
Условие на задачата

# data[].attributes.body
Задача 2.

Отворете сайта www.google.com. Кликнете с десния бутон върху логото на Google и копирайте адреса (линка) на картинката. Отворете копирания URL в нов прозорец. Посочете отделните му части.

# data[].attributes.body
Разделете се на групи от няколко души.

Изберете име за сайт, предназначен за озеленяваща фирма.

Проверете дали то е свободно за регистрация.

Ако не е, потърсете друго.

След като всички групи са приключили, споделете с другите групи вашето решение.

Кое от имената ви допада най-много?

# data[].attributes.body
Задача3. Определете основните части в следния примерен URL адрес:
https:// www.mon.bg/upload/18365/ profil-IT.pdf

Протокол:......

Домейн:.........

Път до ресурса:...

Име на файла:...

Файлов формат:....

# data[].attributes.headline
Тема 2. Избор на име и регистриране на уеб сайт

# data[].attributes.subject
Тема 2. Избор на име и регистриране на уеб сайт

# data[].attributes.body
Етапите, през които трябва да преминете, за да регистрирате своя уеб сайт в интернет, включват:

избор на организация, която предлага услугата уеб хостинг

избор на домейн на уеб сайта

същинско публикуване

управление на съдържанието на сайта с уеб сървър

# data[].attributes.headline
Урок1_Основни етапи в планирането на уеб сайт

# data[].attributes.subject
Урок1_Основни етапи в планирането на уеб сайт

# data[].attributes.headline
Планиране на уеб сайт​                 Тема 1. Основни етапи в планирането на уеб сайт

# data[].attributes.subject
Планиране на уеб сайт​                 Тема 1. Основни етапи в планирането на уеб сайт