1. CSS Контур

1.1. CSS Стиль контуру

Цятковий контур

Пунктирний контур

Суцільний контур

Подвійний контур

Рифлений контур. Ефект залежить від значення кольору контуру

Ребристий контур. Ефект залежить від значення кольору контуру

Внутрішній контур. Ефект залежить від значення кольору контуру

Зовнішній контур. Ефект залежить від значення кольору контуру

1.2. CSS Ширина контуру

Тонкий контур

Середній контур

Товстий контур

Контур завтовшки в 4px

1.3. CSS Колір контуру

Суцільний червоний контур

Цятковий синій контур

Зовнішній сірий контур

1.4. Інвертувати колір

Суцільний інвертований контур

1.5. CSS Скорочена властивість контуру

Пунктирний контур

Цятковий червоний контур

Суцільний 5px жовтий контур

Товстий ребристий рожевий контур

1.6. CSS Outline Offset

Контур цього параграфу складає 15 пікселів за межами межі

2. CSS Текст

2.1. Колір тексту

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque in est laudantium veritatis nobis ipsum porro quaerat consequatur exercitationem ut. Fuga possimus iusto corrupti vel delectus suscipit sed odit repellendus.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem in nihil ipsam fuga eveniet quibusdam nostrum sed. In quidem atque eum tenetur aut! Quia eveniet unde ipsa odio necessitatibus porro.

2.2. Колір тексту та колір фону

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci alias dolores eligendi fugit quibusdam facilis. Nisi adipisci sit ducimus, possimus, qui facere nemo illo expedita, est officia consequatur eligendi molestias.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse fugiat dolores, nesciunt quaerat optio eum maiores asperiores rem tempore quo cumque nihil neque quibusdam inventore facere placeat nobis fugit veritatis.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit quos adipisci atque quaerat, neque perferendis vero cumque repudiandae exercitationem, iusto, amet incidunt tempore libero recusandae ipsum quidem? Iste, recusandae sed?

2.3. CSS Вирівнювання тексту

Текст 1 (center)

Текст 2 (left)

Текст 3 (right)

2.4. Text Align Last / Вирівняти останній текст

text-align-last: right:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align-last: center:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align-last: justify:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

2.5. Напрямок тексту

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut soluta aperiam laboriosam eligendi reiciendis quas magni ut fugiat asperiores sit iste nihil, tenetur repudiandae, molestiae nulla quo, a tempore enim.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut soluta aperiam laboriosam eligendi reiciendis quas magni ut fugiat asperiores sit iste nihil, tenetur repudiandae, molestiae nulla quo, a tempore enim.

2.6. Вертикальне вирівнювання

Це зображення з вирівнюванням за замовчуванням.

Це зображення із вирівнюванням по верхньому краю.

Це зображення з вирівнюванням посередині.

Це зображення з вирівнюванням унизу.

2.7. Декоративна лінія до тексту

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit consectetur et minima, asperiores harum autem veniam dolor rerum excepturi vel vitae, non, fugiat cumque exercitationem numquam necessitatibus ipsam! Ea, velit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

2.8. Колір для декоративної лінії

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit consectetur et minima, asperiores harum autem veniam dolor rerum excepturi vel vitae, non, fugiat cumque exercitationem numquam necessitatibus ipsam! Ea, velit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

2.9. Стиль для декоративної лінії

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit consectetur et minima, asperiores harum autem veniam dolor rerum excepturi vel vitae, non, fugiat cumque exercitationem numquam necessitatibus ipsam! Ea, velit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

2.10. Товщина декоративної лінії

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio nobis a!

2.11. Трансформація тексту

text-transform: uppercase

text-transform: lowercase

text-transform: capitalize

2.12. Відступ тексту

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores ad corporis magni unde libero! Illo officia consectetur explicabo! Quos odio, veniam magni molestias voluptas nam iste fugit voluptate cumque eveniet! Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur autem perspiciatis nihil quam, minima deserunt alias totam consectetur incidunt accusamus nisi optio deleniti rem repellendus dolorum ducimus facilis mollitia amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi perferendis officiis dolorum, ex doloribus cumque. Molestias quasi corrupti provident iusto, iure aliquam porro odio non. Ipsum iusto soluta consequuntur quam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, neque odit! Cum eius hic fuga dicta sunt dolorem quos, omnis, dolor, rerum corrupti at natus sapiente similique exercitationem id error.

2.13. Міжлітерна відстань

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit odio deserunt pariatur hic dolorem. Voluptatem natus eaque obcaecati et corrupti iste commodi culpa delectus blanditiis non! In obcaecati illum ea.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis error quidem omnis corrupti consequuntur ullam provident dolorem architecto tenetur, reprehenderit accusamus atque dignissimos repellat odit deleniti eligendi illo aspernatur doloribus.

2.14. Висота рядка

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit odio deserunt pariatur hic dolorem. Voluptatem natus eaque obcaecati et corrupti iste commodi culpa delectus blanditiis non! In obcaecati illum ea. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus suscipit delectus assumenda omnis beatae sed enim itaque voluptas excepturi unde nulla recusandae, iure vero possimus tempore consequatur corrupti numquam voluptates. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum fugit placeat iure exercitationem doloribus itaque odio dolore dolor. Adipisci voluptatibus dignissimos nobis molestiae sint. Earum quibusdam non qui voluptate perspiciatis?

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis error quidem omnis corrupti consequuntur ullam provident dolorem architecto tenetur, reprehenderit accusamus atque dignissimos repellat odit deleniti eligendi illo aspernatur doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia doloribus tenetur voluptatibus tempore illum reprehenderit, eaque et voluptas dicta libero quia, accusamus sint quidem maxime obcaecati, repudiandae veritatis nesciunt incidunt. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum saepe distinctio architecto ipsa. Corrupti, deserunt iste perspiciatis fuga dolor rem consequuntur suscipit, eum, ipsam earum incidunt. Voluptatibus delectus neque ea.

2.15. Інтервал між словами

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis repellat, sapiente amet eveniet quo fugiat ex dolorum. Possimus dolor maxime earum corporis totam enim neque suscipit, ipsam adipisci dignissimos quaerat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, tempore quae maiores placeat quas, autem accusantium dolor inventore sit id quo voluptatibus, magnam quia! Illum qui reiciendis perferendis obcaecati aliquam?

2.16. Пробіл

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam illum corrupti, explicabo nesciunt repellendus voluptas. Perspiciatis maxime, provident esse quis earum pra labore distinctio quo.

2.17. Тінь тексту

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

3. CSS Шрифти

3.1. CSS властивість font-family

Цей пункт виділено шрифтом Times New Roman

Цей пункт виділено шрифтом Arial

Цей пункт виділено шрифтом Lucida Console

3.2. Font-Style - Стиль шрифту

Це параграф у звичайному стилі

Це параграф курсивом

Це параграф похилим стилем

3.3. Font-Weight - Товщина шрифту

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

3.4. Font-Variant - Варіант шрифту

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

3.5. Встановити розмір шрифту в пікселях

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

3.6. Встановити розмір шрифту за допомогою Em

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

3.7. CSS Скорочена властивість шрифту

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?

4. CSS Макет - Властивість display

4.1. Перевизначити значення display за замовчуванням

HTML

CSS

JavaScript

4.2. Використання width, max-width та margin: auto;

4.3. Властивість position

4.4. Елементи, що перекриваються

Це заголовок

Оскільки зображення має z-index -1, воно буде розташовано за текстом, тобто текст буде знаходитись зверху зображення

5. CSS Макет - Overflow

5.1. Overflow: visible

5.2. Overflow: hidden

5.3. Overflow: scroll

5.4. Overflow: auto

5.5. Overflow-x та overflow-y

6. CSS Макет - float та clear

6.1. Float: right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis accusantium quidem maiores eveniet voluptates facilis possimus fugit quibusdam labore eaque nisi, quasi maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore numquam. Exercitationem quasi explicabo illo fuga saepe fugiat vel, accusantium rem.lamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis accusantium quidem maiores eveniet voluptates facilis possimus fugit quibusdam labore eaque nisi, quasi maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore numquam. Exercitationem quasi explicabo illo fuga saepe fugiat vel, accusantium rem.

6.2. Float: left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis accusantium quidem maiores eveniet voluptates facilis possimus fugit quibusdam labore eaque nisi, quasi maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore numquam. Exercitationem quasi explicabo illo fuga saepe fugiat vel, accusantium rem.lamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis accusantium quidem maiores eveniet voluptates facilis possimus fugit quibusdam labore eaque nisi, quasi maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore numquam. Exercitationem quasi explicabo illo fuga saepe fugiat vel, accusantium rem.

6.3. No float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis accusantium quidem maiores eveniet voluptates facilis possimus fugit quibusdam labore eaque nisi, quasi maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore numquam. Exercitationem quasi explicabo illo fuga saepe fugiat vel, accusantium rem.lamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis accusantium quidem maiores eveniet voluptates facilis possimus fugit quibusdam labore eaque nisi, quasi maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore numquam. Exercitationem quasi explicabo illo fuga saepe fugiat vel, accusantium rem.

6.4. Властивість clear

Без clear

З clear

6.5. Сітка блоків / Блоки однакової ширини

6.6. Зображення одне за одним

CSS ПРОДВИНУТИЙ

1. CSS 2D Трансформації

1.1. Метод translate()

1.2. Метод rotate()

1.3. Метод scale()

1.4. Метод scaleX()

1.5. Метод scaleY()

1.6. Метод skewX()

1.7. Метод skewY()

1.8. Метод matrix()

2. CSS 3D Трансформації

2.1. Метод rotateX()

2.2. Метод rotateY()

2.3. Метод rotateZ()

3. CSS Стилізація зображень

3.1. Округлі зображення

3.2. Мініатюрні зображення

3.3. Адаптивні зображення

3.4. Центрування зображення

3.5. Polaroid зображення / Карточки

3.6. Прозоре зображення

opacity 0.2

opacity 0.5

opacity 1 (за замовчуванням)

3.7. Текст на зображенні

3.8. Фільтри зображень

3.9. Накладення при наведенні на зображення

3.10. Відобразити зображення

4. CSS Відбиття зображення

3.1. Приклад

3.2. CSS Відбиття з градієнтом

5. CSS Властивість object-fit

5.1. Всі значення CSS властивості object-fit

Немає object-fit:

object-fit: fill (за замовчуванням):

object-fit: contain:

object-fit: cover:

object-fit: scale-down:

object-fit: none:

6. CSS Властивість object-position

6.1. Використання властивості object-position

7. CSS Box-sizing - Розмір блоку

7.1. Без CSS властивості box-sizing

7.2. Із CSS властивістю box-sizing

8. CSS Медіа запити

8.1. Медіа-запити. Простий приклад

9. CSS Flexbox

9.1. Flexbox елементи

10. CSS Гнучкий (flex) контейнер

10.1. Властивість flex-direction: column

10.2. Властивість flex-direction: column-reverse

10.3. Властивість flex-direction: row

10.4. Властивість flex-direction: row-reverse

10.5. Властивість flex-wrap: wrap

10.6. Властивість flex-wrap: nowrap

10.7. Властивість flex-wrap: wrap-reverse

10.8. Властивість justify-content: center

10.9. Властивість justify-content: flex-start

10.10. Властивість justify-content: flex-end

10.11. Властивість justify-content: space-around

10.12. Властивість justify-content: space-between

10.13. Властивість align-items: center

10.14. Властивість align-items: flex-start

10.15. Властивість align-items: flex-end

10.16. Властивість align-items: stretch

10.17. Властивість align-items: baseline

10.18. Властивість align-content: space-between

10.19. Властивість align-content: space-around

10.20. Властивість align-content: stretch

10.21. Властивість align-content: center

10.22. Властивість align-content: flex-start

10.23. Властивість align-content: flex-end

10.24. Ідеальне центрування

11. CSS Flex Елементи

11.1. Дочірні елементи

11.2. Властивість order

11.3. Властивість flex-grow

11.4. Властивість flex-shrink

11.5. Властивість flex-basis

11.6. Властивість align-self