{"blocks":[{"type":"paragraph","data":{"text":"Свойство CSS flex — это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis."}},{"type":"paragraph","data":{"text":"Изначально свойство flex не подходит для обёртки элементов — его работа во многом схожа с работой overflow:hidden."}},{"type":"paragraph","data":{"text":"Первое, с чего стоит начать работу с flex, — это flex-wrap."}},{"type":"header2","data":{"level":2,"text":"Flex Wrap"}},{"type":"paragraph","data":{"text":"Добавьте свойство flex-wrap: wrap и посмотрите на поведение flex-элементов."}},{"type":"paragraph","data":{"text":"По умолчанию оно должно растягивать контейнер по высоте и спускать элементы вниз."}},{"type":"paragraph","data":{"text":"Примечание Высота не указана (auto/unset), но контейнер может растягиваться."}},{"type":"image","data":{"file":{"id":18187,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/cf1c35a4-9d6f-4204-beb4-aac1549701a5.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"Это частый случай, когда вам нужно поместить произвольное количество элементов неопределённого размера в видимую область контейнера/экрана."}},{"id":"55976149-b52c-4ad8-87fd-93c29a5300a6","type":"embed","data":{"data":{"id":593,"seo":{"title":"Обучение востребованным IT-профессиям со Skillfactory","description":"ИТ-курсы как для новичков, так и для специалистов, меняющих сферу и повышающих квалификацию."},"link":"/courses/obuchenie-vostrebovannym-it-professiyam-so-skillfactory","logo":null,"name":"obuchenie-vostrebovannym-it-professiyam-so-skillfactory","tags":[{"id":1692,"name":"Для начинающих","slug":"for-beginners","type":["tag","job-skill"],"image":null,"title":"Программирование для начинающих","counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/for-beginners","description":"Программирование для начинающих базируется на учебных планах и руководствах для новичков. В этом разделе содержатся материалы по основам программирования.","backgroundType":"primary","backgroundNumber":1},{"id":1887,"name":"Для продолжающих","slug":"for-amateurs","type":["tag","job-skill"],"image":null,"title":null,"counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/for-amateurs","description":"Для тех, кто уже знает основы и хочет продолжать профессионально развиваться. ","backgroundType":"primary","backgroundNumber":1}],"shows":null,"speed":null,"title":"Обучение востребованным IT-профессиям со Skillfactory","views":0,"clicks":0,"isOpen":true,"status":"publish","tariff":"BASIC","weight":10,"company":null,"content":"","dateEnd":null,"hasCert":false,"lessons":null,"regLink":"https://trk.ppdu.ru/click?uid=248774&pid=17&oid=019be6b3-bd01-48f6-818f-1c5984c98293&erid=2SDnjdG8DyW","currency":{"code":"RUB","name":"Российский рубль","symbol":"₽"},"discount":null,"duration":null,"leadCost":null,"ordToken":"2SDnjdG8DyW","settings":{"showForm":false,"directTransition":false,"straightToTheLanding":false},"dateStart":null,"fullPrice":null,"promoCode":null,"thumbnail":null,"complexity":"NEWBIES","created_at":"2025-03-24T13:07:05.000+03:00","updated_at":"2025-03-26T03:17:02.000+03:00","classFormat":"ONLINE","description":"ИТ-курсы как для новичков, так и для специалистов, меняющих сферу и повышающих квалификацию.","isPermanent":true,"previewLink":"145957da-b433-470d-9776-cc4c1547772d","regFormLink":"https://trk.ppdu.ru/click?uid=248774&pid=17&oid=019be6b3-bd01-48f6-818f-1c5984c98293&erid=2SDnjdG8DyW","tagPriority":false,"currencyCode":"RUB","hoursPerWeek":null,"isHiddenDate":false,"manualWeight":null,"placeAddress":null,"publish_date":"2025-03-25T11:16:07.000+03:00","hasEmployment":true,"pricePerMouth":null,"regButtonText":"Выбрать обучение","availablePlaces":null,"avgConversionRate":null,"ourTrafficConversion":null},"link":"https://tproger.ru/courses/obuchenie-vostrebovannym-it-professiyam-so-skillfactory?erid=2SDnjdG8DyW","type":"tproger","image":null,"title":"Обучение востребованным IT-профессиям со Skillfactory","subType":"tproger_course","viewDomain":"tproger.ru"}},{"type":"paragraph","data":{"text":"Направление элементов можно отзеркалить свойством flex-direction: row-reverse:"}},{"type":"image","data":{"file":{"id":18191,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/cb8d76ef-c461-465a-b996-0e76479a2c66.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"Возможно, такое свойство подойдёт для чтения справа налево. Ещё можно использовать float:right для всех элементов, которые находятся на одной линии с flex-end. Это свойство отличается от row-reverse, т. к. в нём сохраняется корректный порядок элементов."}},{"type":"header2","data":{"level":2,"text":"Justify Content"}},{"type":"paragraph","data":{"text":"Свойство justify-content определяет горизонтальное положение элементов. Это свойство похоже на Flex Wrap, но в justify сохраняется первоначальный порядок элементов."}},{"type":"image","data":{"file":{"id":18192,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/a84aef91-2daf-4c69-ae7c-ad0a549e8f7b.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"В следующем примере (justify-content: center) все элементы вне зависимости от их ширины имеют горизонтальное позиционирование по центру родительского контейнера. Это похоже на свойства position: relative; margin: auto."}},{"type":"image","data":{"file":{"id":18193,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/d481c58b-bac2-4e4d-9cfe-c1c17ca05288.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"Значение space-between добавляет пробелы между всеми inner-элементами, тем самым растягивая строку на всю ширину контейнера:"}},{"type":"image","data":{"file":{"id":18194,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/e08b38c1-428d-44fd-8d2f-11bce65cbeed.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"На первый взгляд следующий пример может показаться идентичным примеру выше. Разница между ними хорошо видна, если элементов будет не целый алфавит, а всего несколько. В следующем примере появляются внешние отступы у крайних нижних элементов."}},{"type":"paragraph","data":{"text":"Пример выше со значением space-between не имеет отступов на угловых элементах. Пример ниже со значением space-around делает равные внешние отступы на всех элементах."}},{"type":"image","data":{"file":{"id":18195,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/7fb74b01-ee33-4a10-ac39-a820cb666f04.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"Идентичный прошлому пример с растянутым элементом middle:"}},{"type":"image","data":{"file":{"id":18196,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/568e0aeb-92e0-4e61-8b45-e70a9e285498.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"Как видите, вам всё равно придётся экспериментировать с flex-элементами, чтобы достичь правильного результата именно для вашего случая. Результат, естественно, зависит и от размеров содержимого."}},{"type":"header2","data":{"level":2,"text":"Align Content"}},{"type":"paragraph","data":{"text":"Все примеры выше имели свойство justify-content. Но элементы также можно позиционировать по вертикали. Свойство justify-content (выше) и свойство align-content (ниже) похожи. Разница только в их направлении — вертикальном или горизонтальном."}},{"type":"paragraph","data":{"text":"Вот пример flex-элементов при вертикальном позиционировании:"}},{"type":"image","data":{"file":{"id":18197,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/67a8214f-54b6-41b4-97ea-635506003bc6.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"У space-evenly есть несколько особенностей значения:"}},{"type":"list","data":{"items":["Свойство выделяет достаточно высоты для корректного отображения элементов.","Вертикальные отступы у строк одинаковы."],"style":"unordered"}},{"type":"paragraph","data":{"text":"Конечно, высоту родительского элемента всё ещё можно менять вручную, элементы в этом случае будут адаптироваться."}},{"type":"header2","data":{"level":2,"text":"На практике"}},{"type":"paragraph","data":{"text":"Вряд ли на вашем сайте будет адаптивная строка алфавита, как в примерах этой статьи. Когда дело дойдёт до фактического создания и корректировки шаблона, вы, наверное, будете экспериментировать на нескольких элементах с большим размером. Вот несколько идей по этому поводу."}},{"type":"header3","data":{"level":3,"text":"Комбинация vertical align и justify content"}},{"type":"paragraph","data":{"text":"В этом случае контент будет отцентрирован во всех направлениях."}},{"type":"header3","data":{"level":3,"text":"Space evenly"}},{"type":"paragraph","data":{"text":"Используя значение space-evenly сразу для align-content и justify-content, можно получить следующий результат:"}},{"type":"image","data":{"file":{"id":18199,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/5214320c-cd78-4b17-b6c1-81fdd334e66b.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"В этом случае нужно стараться делать элементы одной ширины. Пример выше немного странный из-за нечётного количества элементов. Для более красивой масштабируемости количество элементов должно быть чётным."}},{"type":"image","data":{"file":{"id":18200,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/374c0d07-18ab-4f37-ab11-36891fb5f15c.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"К тому же, если количество элементов будет чётным, то масштабирование будет более чистым и чувствительным без сеток на CSS и танцев с бубном на JS."}},{"id":"275c0262-3aac-4162-b358-4f85118af5fc","type":"embed","data":{"data":{"id":593,"seo":{"title":"Обучение востребованным IT-профессиям со Skillfactory","description":"ИТ-курсы как для новичков, так и для специалистов, меняющих сферу и повышающих квалификацию."},"link":"/courses/obuchenie-vostrebovannym-it-professiyam-so-skillfactory","logo":null,"name":"obuchenie-vostrebovannym-it-professiyam-so-skillfactory","tags":[{"id":1692,"name":"Для начинающих","slug":"for-beginners","type":["tag","job-skill"],"image":null,"title":"Программирование для начинающих","counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/for-beginners","description":"Программирование для начинающих базируется на учебных планах и руководствах для новичков. В этом разделе содержатся материалы по основам программирования.","backgroundType":"primary","backgroundNumber":1},{"id":1887,"name":"Для продолжающих","slug":"for-amateurs","type":["tag","job-skill"],"image":null,"title":null,"counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/for-amateurs","description":"Для тех, кто уже знает основы и хочет продолжать профессионально развиваться. ","backgroundType":"primary","backgroundNumber":1}],"shows":null,"speed":null,"title":"Обучение востребованным IT-профессиям со Skillfactory","views":0,"clicks":0,"isOpen":true,"status":"publish","tariff":"BASIC","weight":10,"company":null,"content":"","dateEnd":null,"hasCert":false,"lessons":null,"regLink":"https://trk.ppdu.ru/click?uid=248774&pid=17&oid=019be6b3-bd01-48f6-818f-1c5984c98293&erid=2SDnjdG8DyW","currency":{"code":"RUB","name":"Российский рубль","symbol":"₽"},"discount":null,"duration":null,"leadCost":null,"ordToken":"2SDnjdG8DyW","settings":{"showForm":false,"directTransition":false,"straightToTheLanding":false},"dateStart":null,"fullPrice":null,"promoCode":null,"thumbnail":null,"complexity":"NEWBIES","created_at":"2025-03-24T13:07:05.000+03:00","updated_at":"2025-03-26T03:17:02.000+03:00","classFormat":"ONLINE","description":"ИТ-курсы как для новичков, так и для специалистов, меняющих сферу и повышающих квалификацию.","isPermanent":true,"previewLink":"145957da-b433-470d-9776-cc4c1547772d","regFormLink":"https://trk.ppdu.ru/click?uid=248774&pid=17&oid=019be6b3-bd01-48f6-818f-1c5984c98293&erid=2SDnjdG8DyW","tagPriority":false,"currencyCode":"RUB","hoursPerWeek":null,"isHiddenDate":false,"manualWeight":null,"placeAddress":null,"publish_date":"2025-03-25T11:16:07.000+03:00","hasEmployment":true,"pricePerMouth":null,"regButtonText":"Выбрать обучение","availablePlaces":null,"avgConversionRate":null,"ourTrafficConversion":null},"link":"https://tproger.ru/courses/obuchenie-vostrebovannym-it-professiyam-so-skillfactory?erid=2SDnjdG8DyW","type":"tproger","image":null,"title":"Обучение востребованным IT-профессиям со Skillfactory","subType":"tproger_course","viewDomain":"tproger.ru"}},{"type":"paragraph","data":{"text":"Центрирование элементов по вертикали внутри других элементов создаёт проблемы последние десять лет. Flex может их решить. Если использовать свойство space-evenly в двух направлениях, отступы будут появляться автоматически даже при разной высоте элемента:"}},{"type":"image","data":{"file":{"id":18202,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/32443b99-00f8-4fed-b190-37ff5e977ac2.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"Если вы посмотрите на flex в целом, то заметите, что это, наверное, самое полезное сочетание flex-свойств."}},{"type":"header2","data":{"level":2,"text":"Размер элементов"}},{"type":"paragraph","data":{"text":"Убедитесь, что вы явно указываете размер элементов. Если этого не сделать, некоторые свойства увеличения во flex попросту не будут работать. Используйте min-width, max-width, и width/height соответственно. Эти свойства могут кардинально повлиять на масштабируемость вашего контента."}},{"type":"header2","data":{"level":2,"text":"Примеры комбинаций свойств в одной анимации"}},{"type":"list","data":{"items":["flex-direction: row; justify-content: [value];"],"style":"unordered"}},{"type":"image","data":{"file":{"id":18203,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/8c10ca84-588b-405e-8f44-6b7da03e4d95.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"list","data":{"items":["flex-direction: column; justify-content: [value];"],"style":"unordered"}},{"type":"image","data":{"file":{"id":18204,"url":"https://media.tproger.ru/user-uploads/23823/2023-10-15/fcf14af0-1a8b-4bed-85d7-f291b2715676.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false}},{"type":"paragraph","data":{"text":"Хотя рекомендуется использовать flex внутри CSS-сеток, это совсем не обязательно. Flex хорош и сам по себе."}},{"type":"embed","data":{"link":"https://tproger.ru/translations/how-to-do-bad-css"}}]}

Ошибка в настройках сайта