Flexbox CSS #1 - практика выравнивания элементов

18884
76
968
12.12.2017
Denis Gorelov

Denis Gorelov

1935617
32600
132
06.07.2013
RU
Описание видео:

Из данного урока вы узнаете, что такое #Flexbox #CSS и как при помощи его выравнивать элементы по горизонтали и вертикали. Описание свойств - 🤍bit.ly/2AuXmNJ Практический пример - 🤍bit.ly/2B8C1sx В дальнейшем закрепляем знания на практическом примере где сделаем простенькую анимацию. Flexbox CSS, свойства с которыми познакомимся #display, #justify-content, #align-items. Реквизиты для поддержки канала: WMR - R165181087249 WMZ - Z138569415925 PayPal - 🤍paypal.me/dwstv Яндекс - 🤍money.yandex.ru/to/410011610186118 Сбербанк - 4276-3000-2291-1211 Во время урока я использую: Документацию по css и flexbox Редактор #PhpStorm *Видео метки*: [00:22] - Делаем плацдарм по flexbox [03:22] - Свойство display [06:18] - Свойство justify-content [07:23] - Свойство align-items [09:20] - Практика по flexbox Обсуждение видео: 🤍youtu.be/WM1fzRm152g Подписка на канал: 🤍bit.ly/2oR3EfT Видео сборник: 🤍dwstroy.ru/~S126H FAQ - Ответы на Ваши вопросы: 🤍bit.ly/2rHZvR1 Голосование - 🤍vk.com/topic-70729755_35667650 *Другие видео на канале DWSTV*: JavaScript Основы - 🤍bit.ly/2udeTq3 Сайт с нуля - 🤍dwstroy.ru/~7KNnM Уроки по #CSS - 🤍dwstroy.ru/~paoBU 1С Битрикс работа с сайтом - 🤍dwstroy.ru/~dEG4q Управление системой Битрикс - 🤍dwstroy.ru/~Zdt4K Настройки сайта 1С Битрикс - 🤍dwstroy.ru/~t0UVZ Добавляйтесь к нам в друзья: Сайт видео-уроков: 🤍dwstroy.ru/video/ Канал в VK автора уроков: 🤍vk.com/dwstv

Кадры из видео
Flexbox CSS #1 - практика выравнивания элементов
Flexbox CSS #1 - практика выравнивания элементов
Flexbox CSS #1 - практика выравнивания элементов
Flexbox CSS #1 - практика выравнивания элементов
Тэги из видео
Комментарии пользователей:
Artyr Danilov
2020-07-12 17:03:37

как вы вставили # одновременно в несколько ссылок ?

Zizz Xiii
2020-05-01 08:41:48

почему-то иконки не добавляются. link к иконкам есть.

bodya5645
2020-03-19 10:34:11

Очень хороший урок!

inzoddex
2019-09-28 06:04:14

Лучшее, что есть на ютубе

Vika Fox
2019-03-17 15:11:31

Спасибо, все понятно , все получилось! Лайк =*

current 17
2019-03-03 13:26:58

Полезный материал. Автору спасибо!

Rus G
2018-10-13 10:59:27

Спасибо Денис, очень внятно обьесняешь. Респект тебе Бро!!!

Пирожок С картошкой
2018-10-05 03:54:46

нет не является

KoTэ
2018-08-26 20:32:00

Это скорее практика не по флекс-боксам, а анимации.😃

Sasha Chubukov
2018-06-04 09:28:34

Решил проблему с отступом картинки снизу от границы блока с помощью свойства display: block. Это позволило избавится от ее враппера.

Di So
2018-04-15 15:07:28

Отлично!

Vlad L
2018-04-08 21:41:04

Картинка? Да. Я так думаю.

Kristina Branishevskaya
2018-03-08 12:32:42

Спасибо огромное, очень интересные видео, многие вещи наконец стали понятными:)

Alex Seregin
2018-03-02 08:48:27

Благодарю!

Max Krutov
2018-02-24 18:26:49

Здравствуйте, Денис! Очень понравился Ваш урок! Весьма содержательный и доступно изложен! Подскажите мне пожалуйста как новичку, правильно ли я мыслю и верстаю блок в котором 4 маленьких блока, которые идут друг под дружкой и по 4 углам (к примеру если у меня есть макет с конкретными размерами блоков и именно таким расположением)? Просто хочу до конца разобраться в последовательности применения flex box!
Денис, взгляните пожалуйста мой код: (Заранее прошу прощения, что отбираю Ваше время)

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js%22%3E%3C/script%3E%3C![endif]--%3E cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->
<title>Flexbox</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="CSS/Style.css" rel="stylesheet">
</head>

<body>

<div class="wrap">

<div class="block block1">

Block 1

</div>

<div class="block block2">

Block 2

</div>

<div class="block block3">

Block 3

</div>

<div class="block block4">

Block 4

</div>

</div>


</body>

</html>

CSS:

*{
margin: 0;
padding: 0;
}

html, Body{
height: 100%;
}

.wrap{
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
height: 500px;
width: 505px;
border: 1px solid red;
margin: 20px auto;
box-sizing: content-box;
}

.block{
background: youtube.com/results?search_query=%2326a082 #26a082 ;
color: black;
font-size: 15px;
border: 1px solid youtube.com/results?search_query=%23ccc #ccc ;
box-sizing: border-box;
}

.block2, .block1, .block3, .block4{
flex-basis: 250px;
height: 200px;

}

.block3, .block4{
margin-top: 100px;
}

.block1, .block3{
margin-right: 5px;
}

Заранее спасибо Вам за Ваш ответ, Денис!

Алексей Гришин
2018-02-23 17:41:18

Топчииик! Давно ждал этот видос)))

KeepoCat
2018-02-17 11:43:39

Господи, как же он все рассказывает и показывает, мне все прям детально понятно, просто обожаю автора <3

tm
2018-02-13 10:56:24

ох и безлайн

0x2d
2018-01-04 21:18:21

Я первый диз, еееееееееееееее

Что ищут прямо сейчас
fairway wood sevilya Figs apex Лоба billal hossain vlogs BRIDALSAREES designer handbags joung обнова Black russia icarus мнение LEXUS IS populer Cemu Guide cara menyambung senara Marina Benepayo risk of rain 2 гайд на шефа azur lane hacks fr skb arsiparis SCRIBBLE dance floor
Похожие видео
07.01.2018
Flexbox CSS #2 - (практика) направление осей и многострочность

Flexbox CSS #2 - (практика) направление осей и многострочность

16.10.2018
В чем разница между Float, Flexbox и Grid CSS?

В чем разница между Float, Flexbox и Grid CSS?

24.10.2017
Ответ на главный вопрос в CSS, Михаил Иванкив

Ответ на главный вопрос в CSS, Михаил Иванкив

05.02.2020
CSS3 Animation background-image | Практика CSS / HTML5

CSS3 Animation background-image | Практика CSS / HTML5

04.06.2018
Flexbox Tutorial - 22 - Holy Grail Layout

Flexbox Tutorial - 22 - Holy Grail Layout

23.03.2019
Learn Flex-box layout in 15 minutes |  CSS Flex Basics tutorial

Learn Flex-box layout in 15 minutes | CSS Flex Basics tutorial

13.09.2017
Кнопка на CSS / Button animation CSS3

Кнопка на CSS / Button animation CSS3

10.05.2017
Flexbox CSS3 в одном видео за 20 минут!

Flexbox CSS3 в одном видео за 20 минут!

07.04.2020
CSS transform. 2D и 3D трансформации translate, scale, rotate и другие

CSS transform. 2D и 3D трансформации translate, scale, rotate и другие

19.03.2018
CSS Flexbox Course

CSS Flexbox Course

26.12.2019
Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.

Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.

21.04.2016
Вертикальное и горизонтальное выравнивание на CSS. Полное руководство.

Вертикальное и горизонтальное выравнивание на CSS. Полное руководство.

18.09.2016
Flexbox CSS.  Flex Wrap

Flexbox CSS. Flex Wrap

08.01.2019
Responsive Image Gallery Using Flexbox | Simple Image gallery | Beginners Tutorial

Responsive Image Gallery Using Flexbox | Simple Image gallery | Beginners Tutorial

25.05.2022
Адаптивная верстка сайта на HTML CSS

Адаптивная верстка сайта на HTML CSS

28.07.2015
Flexbox - полезные примеры

Flexbox - полезные примеры